# Adicionar botões na barra de navegação da plataforma
A função descrita a seguir será útil para adicionar botões na barra de navegação da plataforma.
Esta função está disponível para que os botões possam ser configurados a partir da personalização das plataformas
#### Há duas opções de botões que podem ser adicionadas na barra: Ícone e Botão no menu principal.
Icono:[](https://docs.redgps.com/uploads/images/gallery/2022-06/Ihdejemplo-icono.png)
Exemplo de onde o botão tipo ícone é adicionado na barra.
**Observações**: Os novos ícones serão adicionados à esquerda dos ícones que já estão disponíveis por padrão na plataforma.
Botão no menu principal:
[](https://docs.redgps.com/uploads/images/gallery/2022-06/ejemplo-boton.png)
Exemplo de onde o botão é adicionado no menu principa
**Observações**: Os novos botões serão inseridos no menu principal da plataforma ou, se houver muitos botões configurados, o novo botão será adicionado ao menu suspenso 'mais opções'.
---
### Forma de invocar a função **addNavbarButton()**
En primeiro lugar, você deve acessar a plataforma "Partners". Uma vez dentro, na opção superior, clique em "Opções" e entre na seção "personalização de plataformas".
Uma vez na "personalização de plataformas", acesse Cliente -> Javascript personalizado. Ao entrar, será exibido um campo de texto onde você poderá adicionar código JS personalizado.
Para utilizar as funções dessa ferramenta, deve-se chamar a variável global '\_addButton' e em seguida acessar seu atributo/função 'addNavbarButton', que recebe como argumentos um objeto com os parâmetros necessários para a criação do botão e o carregamento correto das informações.
[](https://docs.redgps.com/uploads/images/gallery/2024-10/javascipt-1.png)
**NOTA**: Para cada novo botão, deve-se chamar a função "\_addButton.addNavbarButton(botonEjemplo)" com o objeto a ser criado, conforme será mostrado mais adiante.
**AVISO**: Para realizar requisições a sites externos, é necessário ter o CORS 'Access-Control-Allow-Origin' habilitado em seu servidor; caso contrário, as solicitações serão rejeitadas e nenhuma informação será exibida.
## Observações Gerais
Os seguintes são obrigatórios em qualquer botão que se queira configurar:
1- load\_in\_modal
2- target\_position
No caso de usar um Modal, os seguintes atributos são obrigatórios:
1- load\_in\_modal
2- modal\_url (Caso carregue conteúdo externo)
Todas as opções de botões podem ser configuradas como tipo "ícone" ou tipo "menu". Dependendo do caso, devem ser adicionados os atributos e configurações necessários.
---
#### Exemplos dos tipos de botões
## 1. Botão tipo ícone
Definimos primeiro o objeto com os argumentos necessários.
**AVISO**: Neste caso, é obrigatório definir o atributo "target\_position" com o valor "icon".
**AVISO**: Neste caso, é obrigatório definir o atributo "icon\_class" com algum valor do catálogo de ícones disponíveis em a url [http://library.service24gps.com/iconos.html](http://library.redgps.com/iconos.html).
**OBSERVAÇÃO**: O seguinte objeto é um exemplo de um botão tipo "Ícone", com o qual se carrega um modal com conteúdo externo.
```JavaScript
var myButton = {}; //Deve declarar uma variável do tipo objeto para adicionar os atributos necessários.
myButton.btn_name = 'Botão Ícone'; // String que será exibido como tooltip (no caso do botão ícone) (OBRIGATÓRIO)
myButton.load_in_modal = true; // Para que o conteúdo seja exibido no modal, deve-se definir como true (OBRIGATÓRIO).
myButton.modal_title = 'Conteúdo Externo De Teste'; // Este é o título que é exibido no cabeçalho do modal
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',// URL à qual será feita a solicitação (OBRIGATÓRIO)
myButton.modal_width = '30%';// Define-se o tamanho da largura do modal.
myButton.modal_height = '50%';// Define-se o tamanho da altura do modal.
myButton.css_class = 'myClass';// Caso queira adicionar um estilo personalizado ao botão, pode fazê-lo especificando o nome da classe.
myButton.target_position = 'icon';// Para definir um botão do tipo ícone, este campo deve ser especificado como "icon" (OBRIGATÓRIO).
myButton.icon_class = 'i-cog';// Deve-se especificar um ícone do catálogo de ícones disponíveis em http://library.service24gps.com/iconos.html.
_addButton.addNavbarButton(myButton); // Sempre que um novo botão for criado, deve-se invocar a variável _addButton e chamar a função .addNavbarButton(); à qual deve ser enviado como parâmetro o objeto criado.
```
```JavaScript
var myButton = {}; //Deve declarar uma variável do tipo objeto para adicionar os atributos necessários.
myButton.btn_name = 'Botón Icono'; // String que será exibida como tooltip (no caso do botão ícone) (OBRIGATÓRIO).
myButton.load_in_modal = true; // Para que o conteúdo seja exibido no modal, deve-se definir como true (OBRIGATÓRIO).
myButton.modal_title = 'Contenido Externo De Prueba';// Este é o título que é exibido no cabeçalho do modal
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',// URL à qual será feita a solicitação (OBRIGATÓRIO).
myButton.modal_width = '30%';// Define-se o tamanho da largura do modal.
myButton.modal_height = '50%';// Define-se o tamanho da altura do modal.
myButton.css_class = 'myClass';// Caso queira adicionar um estilo personalizado ao botão, pode fazê-lo especificando o nome da classe.
myButton.target_position = 'icon';// Para definir um botão do tipo ícone, este campo deve ser especificado como "icon" (OBRIGATÓRIO).
myButton.icon_class = 'i-cog';// Deve-se especificar um ícone do catálogo de ícones disponíveis em http://library.service24gps.com/iconos.html.
_addButton.addNavbarButton(myButton); // Sempre que um novo botão for criado, deve-se invocar a variável _addButton e chamar a função .addNavbarButton(); à qual deve ser enviado como parâmetro o objeto criado.
```
Neste caso, sendo um botão do tipo Ícone, o elemento é adicionado à esquerda dos botões que já estão disponíveis por padrão.
É possível configurar um botão do tipo ícone com as demais funcionalidades, como:
1- Carregar conteúdo externo em um modal
2- Carregar conteúdo externo JSON em um modal
3- Chamar uma função de JS
4- Carregar conteúdo em uma nova janela.
2. Botão no menu principal
Definimos primeiro o objeto com os argumentos necessários.
**AVISO**: Neste caso, é obrigatório definir o atributo "target\_position" com o valor "menu".
**OBSERVAÇÃO**: O seguinte objeto é um exemplo de um botão do tipo "menu", com o qual é carregado um modal com conteúdo externo em JSON.
```JavaScript
var myButton = {};
myButton.btn_name = 'Botão Menu';// String que será exibida como rótulo do botão (OBRIGATÓRIO)
myButton.load_in_modal = true;
myButton.modal_title = 'Conteúdo Externo De Teste';
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',//URL para a qual a solicitação será feita (OBRIGATÓRIO)
myButton.modal_width = '30%';
myButton.modal_height = '50%';
myButton.css_class = 'myClass';
myButton.target_position = 'menu';// Para definir um botão do tipo menu, este campo deve ser especificado como "menu" (OBRIGATÓRIO)
_addButton.addNavbarButton(myButton);
```
```JavaScript
var myButton = {};
myButton.btn_name = 'Botão Menu';// String que será exibida como rótulo do botão (OBRIGATÓRIO)
myButton.load_in_modal = true;
myButton.modal_title = 'Conteúdo Externo De Teste';
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',// URL para a qual a solicitação será feita (OBRIGATÓRIO)
myButton.modal_width = '30%';
myButton.modal_height = '50%';
myButton.css_class = 'myClass';
myButton.target_position = 'menu';// Para definir um botão do tipo menu, este campo deve ser especificado como "menu" (OBRIGATÓRIO)
_addButton.addNavbarButton(myButton);
```
Neste caso, por ser um botão do tipo Menu, o botão é adicionado ao final dos elementos do menu, mas antes do botão "sair".
**NOTA**: No caso de haver o submenu "Mais opções", o novo botão será adicionado ao final dos elementos do submenu.
É possível configurar um botão do tipo menu com as demais funcionalidades, como:
1- Carregar conteúdo externo em um modal
2- Carregar conteúdo externo JSON em um modal
3- Chamar uma função de JS
4- Carregar conteúdo em uma nova janela
3. Botão para carregar conteúdo externo em nova janela
Definimos primeiro o objeto com os argumentos necessários.
**AVISO**: Para esta opção, é obrigatório configurar o atributo "href" com a URL da página que será aberta em uma nova vista.
**AVISO**: Para esta opção, é obrigatório configurar o atributo "href\_target" com o parâmetro "\_blank".
**OBSERVAÇÃO**: O seguinte objeto é um botão do tipo "menu", que ao clicar abre a página https://www.google.com em uma nova janela.
```JavaScript
var myButton = {};
myButton.btn_name = 'Carregar Nova Janela';
myButton.href = 'https://www.google.com'; // URL da página que será carregada em uma nova janela (OBRIGATÓRIO)
myButton.href_target = '_blank';// Deve-se declarar este atributo como '_blank' para abrir uma nova janela; caso contrário, a página atual será substituída.
myButton.css_class = 'myClass';
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
```
```JavaScript
var myButton = {};
myButton.btn_name = 'Carregar Nova Janela';
myButton.href = 'https://www.google.com'; // URL da página que será carregada em uma nova janela (OBRIGATÓRIO)
myButton.href_target = '_blank';// Este atributo deve ser declarado como '_blank' para abrir uma nova janela; caso contrário, a página atual será substituída.
myButton.css_class = 'myClass';
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
```
**OBSERVAÇÃO**: Neste caso, não são utilizados os atributos para um modal, pois será aberta uma janela independente do site.
4. Botão para executar uma função JavaScript
Definimos primeiro o objeto com os argumentos necessários.
**AVISO**: Para esta opção, é necessário usar o atributo "onclick" e, como parâmetro, deve-se atribuir a função que deseja executar.
**OBSERVAÇÃO**: O seguinte objeto é um botão do tipo "menu", que ao clicar sobre o botão exibe um alert.
```JavaScript
var myButton = {};
myButton.btn_name = 'Mostrar Alerta';
myButton.css_class = 'myClass';
myButton.onclick = 'alert('Alerta');'; // Deve-se especificar a função que será executada ao clicar no botão (OBRIGATÓRIO)
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
```
```JavaScript
var myButton = {};
myButton.btn_name = 'Mostrar Alerta';
myButton.css_class = 'myClass';
myButton.onclick = 'alert('Alerta');'; // Deve-se especificar a função que será executada ao clicar no botão (OBRIGATÓRIO)
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
```
**OBSERVAÇÃO**: Neste caso, pode ou não usar os atributos para um modal, dependendo de se em alguma função é necessário exibir conteúdo no modal.
## 5.Botão para mostrar em um modal um ponto no mapa do Open Street Maps
Definimos primeiro o objeto com os argumentos necessários.
**AVISO**: Para esta opção, é obrigatório configurar o atributo "tipo\_mapa" com o parâmetro "osm".
**AVISO**: Para esta opção, é obrigatório configurar o atributo "latitud" com a coordenada do ponto a ser exibido no mapa.
**AVISO**: Para esta opção, é obrigatório configurar o atributo "longitud" com a coordenada do ponto a ser exibido no mapa.
```JavaScript
var myButton = {};
myButton.btn_name = 'Mapa OSM';
myButton.load_in_modal = true;
myButton.modal_title = 'Ejemplo Mapa OSM';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'osm';//Para utilizar a cartografia do Open Street Maps, deve-se especificar este campo como "osm".
myButton.latitud = '19.043806339673186';//Deve-se especificar a latitude do ponto a ser exibido no mapa.
myButton.longitud = '-98.19825315772778';//Deve-se especificar a latitude do ponto a ser exibido no mapa.
_addButton.addNavbarButton(myButton);
```
```JavaScript
var myButton = {};
myButton.btn_name = 'Mapa OSM';
myButton.load_in_modal = true;
myButton.modal_title = 'Ejemplo Mapa OSM';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'osm';// Para utilizar la cartografía de Open Street Maps, se debe especificar este campo como "osm"
myButton.latitud = '19.043806339673186';//Se debe de especificar la latitud del punto a mostrar en el mapa
myButton.longitud = '-98.19825315772778';//Se debe de especificar la longitud del punto a mostrar en el mapa
_addButton.addNavbarButton(myButton);
```
## 6. Botão para mostrar em um modal um ponto no mapa do Google Maps.
Definimos primeiro o objeto com os argumentos necessários.
**AVISO**: Para esta opção, é obrigatório configurar o atributo "tipo\_mapa" com o parâmetro "google".
**AVISO**: Para esta opção, é obrigatório configurar o atributo "latitude" com a coordenada do ponto a ser exibido no mapa.
**AVISO**: Para esta opção, é obrigatório configurar o atributo "longitude" com a coordenada do ponto a ser exibido no mapa.
```JavaScript
var myButton = {};
myButton.btn_name = 'Mapa Google';
myButton.load_in_modal = true;
myButton.modal_title = 'Exemplo Mapa Google';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'google';// Para utilizar a cartografia do Google Maps, deve-se especificar este campo como "google"
myButton.latitud = '19.043806339673186';//Deve-se especificar a latitude do ponto a ser exibido no mapa
myButton.longitud = '-98.19825315772778';//Deve-se especificar a longitude do ponto a ser exibido no mapa
_addButton.addNavbarButton( myButton );
```
```JavaScript
var myButton = {};
myButton.btn_name = 'Mapa Google';
myButton.load_in_modal = true;
myButton.modal_title = 'Exemplo Mapa Google';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'google';// Para utilizar a cartografia do Google Maps, deve-se especificar este campo como "google"
myButton.latitud = '19.043806339673186';//Deve-se especificar a latitude do ponto a ser exibido no mapa
myButton.longitud = '-98.19825315772778';//Deve-se especificar a longitude do ponto a ser exibido no mapa
_addButton.addNavbarButton( myButton );
```
---
### Ejemplo de um arquivo PHP para ser configurado em seu servidor e aceitar solicitações externas.
Lembre-se de que esses cabeçalhos são importantes para serem configurados para que as solicitações ao seu servidor sejam realizadas corretamente.
```PHP
```