voltar
Intruções de uso para o Barramento v.2.0 Beta
1. Certificar-se que o CSS do Guide da Porto Seguro está inserido na página.
Inclua o código na seção <head> de sua página:
<link href="https://www.portoseguro.com.br/visual/v.1/css/ps-lib.core-min.css" rel="stylesheet" type="text/css" media="screen" />
2. Certificar-se que o script do jQuery está no final do documento.
Inclua o código antes do </body> de sua página:
<script src="https://barramc.campanhaporto.com.br/static/manual/js/jquery.js"></script>
É importante verificar a versão do jQuery. A Barra tem requerimento mínimo da versão 1.9.x e foi testada até a versão 3.3.1.
3. Certificar-se que o script do Guide da Porto Seguro está após a chamada do jQuery.
Inclua o código depois do script do jQuery:
<script src="https://www.portoseguro.com.br/visual/v.1/js/min/ps-lib.core-min.js"></script>
4. Configurar e incluir o Script de Inicialização da Barra
Inclua o código depois do script do Guide Porto Seguro:
<script type="text/javascript">
var _bmc = {
Homolog: true, // true | false
Modo: "fj", // f = cpf | j = cnpj | fj = cpfcnpj
Marca: "porto", // porto | azul | itau | h4p
ItemDefaults: { // Itens obrigatórios para todos os ítens da barra
IdProduto: 1,
IdTipoProduto: 1,
IdRamo: 27,
Referencia: "sitePorto-calculeContrate",
},
Appearance: {
Theme: "default" // default | white | site-institucional (opcional)
},
Itens: [
{
Type: "ajax", // ajax | chat | link | command | whatsapp
BarIcon: "call-white", // Ícone do item na barra: call-white | email-white | agende-white | ps-ico-* (ícone básico do guide)
BarText: "Ligamos para você", // Título do item na barra
Mobile: true, // (opcional) Habilita ou desabilita item para o celular (true | false - padrão é "false")
HideOnMenu: false, // (opcional) Esconde um item no menu (true | false - padrão é "false")
Meta: {
Origem: "ligue-me" // Parâmetro de origem (ligue-me ou whatsapp)
},
Metrics: { // Parâmetros para mensuração analytics
GtmOpenEvent: "Solicitar contato",
GtmSubmitEvent: "ligue-me",
},
Modal: {
Title: "Ligamos para você", // Título do modal
Schedule: false // Habilita ou desabilita o campo de agendamento (true | false)
},
},
{
Type: "whatsapp", // ajax | chat | link | command | whatsapp
BarIcon: "whatsapp", // Ícone do item na barra: call-white | email-white | agende-white | ps-ico-* (ícone básico do guide)
BarText: "Atendimento por whatsapp", // Título do item na barra
Mobile: true, // (opcional) Habilita ou desabilita item para o celular (true | false - padrão é "false")
HideOnMenu: false, // (opcional) Esconde um item no menu (true | false - padrão é "false")
Meta: {
Origem: "whatsapp" // Parâmetro de origem (ligue-me ou whatsapp)
TemplateId: "ID da Template HSM", // (opcional) exclusivo para Type = whatsapp
TemplateName: "Nome da Template HSM", // (opcional) exclusivo para Type = whatsapp
InteressePor: "Nome do Produto para envio de mensagem no Whatsapp", // (opcional, padrão = Consórcio) exclusivo para Type = whatsapp
Campanha: "Campanha para uso na integração do Whatsapp", // exclusivo para Type = whatsapp
},
Metrics: { // Parâmetros para mensuração analytics
GtmOpenEvent: "Solicitar contato",
GtmSubmitEvent: "ligue-me",
},
Modal: {
Title: "Ligamos para você", // Título do modal
Schedule: false // Habilita ou desabilita o campo de agendamento (true | false)
},
},
{
Type: "link",
BarIcon: "ps-ico-shopping-cart",
BarText: "Contrate online",
Meta: {
Href: "https://wwws.portoseguro.com.br/vendaonline/home.ns?skin=azul&cmph=101&utm_source=Azul-Seguros&utm_medium=barra&utm_content=cotacao-online&utm_campaign=PS-Auto-VDO-Azul-Seguros",
Target: "_self"
},
},
{
Type: "command",
BarIcon: "ps-ico-alert",
BarText: "Alerta",
Meta: {
Command: "alert('test');"
},
}
]
};
(function (c, d) {
var s = document.createElement(c),
c = document.getElementsByTagName(c)[0];
s.type = 'text/javascript';
s.async = false;
s.src = d;
c.parentNode.insertBefore(s, c);
})('script', 'https://barramc.campanhaporto.com.br/v2/bmc.min.js');
</script>
O que é obrigatório que seja alterado:
Homolog- Define se o sistema estará em modo Homologação ou Produção. (Aceita True ou False)
Modo- Modo da página, Pessoa Física ou Jurídica. (Aceita f = cpf, j = cnpj, fj = cpf e cnpj)
Marca-
Altera o link de contato do modal para os contatos da marca especificada no objeto de implementação da Barra do Multicanal no ambiente. Os valores aceitos até o momento são:
- porto
- para implementação da Barra do Multicanal no Portal e nas LPs da Porto Seguro
- azul
- para implementação da Barra do Multicanal no Portal e nas LPs da Azul Seguros
- itau
- para implementação da Barra do Multicanal nas LPs da Itáu Seguros
- h4p
- para implementação da Barra do Multicanal no Venda Online e LPs da Health 4 Pet
IdProduto- Identificação do Produto. Verificar qual ID utilizar.
IdTipoProduto- Identificação do Tipo do Produto. Verificar qual ID utilizar
IdRamo- Identificação do Ramo. Verificar qual ID utilizar
Referencia- Uma identificação da página ou campanha que está rodando a página.
Itens padrão
Em
ItemDefaults:Configurações opcionais
Theme- Pode-se escolher por um tema, associado à marca (default) ou sua versão para aplicações em fundos escuros. (Aceita "default" ou "white")
BarBgColor- Cor de fundo botão flutuante (Aceita cores em hexadecimal)
BarFontColor- Cor da fonte do ícone do botão flutuante. (exemplo: '#f0f0f0')
LinkItemBorderColor- Cor da borda dos botões da barra flutuante. (exemplo: '#f0f0f0')
LinkItemBgColor- Cor de fundo dos botões da barra flutuante. (exemplo: '#f0f0f0')
LinkItemBgColor- Cor de fundo dos botões da barra flutuante. (exemplo: '#f0f0f0')
LinkItemFontColor- Fonte dos botões da barra flutuante (Exemplo: 'Arial, sans-serif').
LinkItemHoverBgColor- Cor de fundo dos botões da barra flutuante quando estão em mouseOver (Exemplo: 'red').
LinkItemHoverFontColor- Cor de fonte dos botões da barra flutuante quando estão em mouseOver (Exemplo: '#f00').
LinkItemCustomCSS- CSS aplicado para os botões da barra flutuante (Exemplo: 'padding: 10px 15px !importante'. Recomendamos o uso do !important).
LinkItemHoverCustomCSS- CSS aplicado para os botões da barra flutuante quando estão em mouseOver (Exemplo: 'padding: 10px 15px !importante'. Recomendamos o uso do !important).
ModalBgColor- Cor de fundo do modal do formulário.
ModalFontFamily- Fonte utilizada no modal do formulário.
ModalFontSize- Tamanho de fonte padrão utilizado no modal do formulário.
ModalFontColor- Cor da fonte padrão utilizada no modal do formulário.
ModalCustomCSS- CSS aplicado para o modal do formulário. (Exemplo: 'padding: 10px 15px !importante'. Recomendamos o uso do !important).
ModalTitleFontFamily- Fonte do título do modal.
ModalTitleCustomCSS- CSS aplicado para o título do modal. (Exemplo: 'padding: 10px 15px !importante'. Recomendamos o uso do !important).
ModalLabelFontFamily- Fonte para o Label dos campos do formulário no modal.
ModalLabelCustomCSS- CSS aplicado para o Label dos campos do formulário no modal.
ModalInputFontFamily- Fonte para os campos do formulário no modal.
ModalInputCustomCSS- CSS aplicado para os campos do formulário no modal.
ModalInputFocusCustomCSS- CSS aplicado para os campos do formulário no modal quando estão com foco.
ModalButtonFontFamily- Fonte para os botões do formulário no modal.
ModalButtonCustomCSS- CSS aplicado para os botões do formulário no modal.
ModalButtonHoverCustomCSS- CSS aplicado para os botões do formulário no modal quando estão com mouseOver.
ModalButtonActiveCustomCSS- CSS aplicado para os botões do formulário no modal quando estão ativos.
Type- Define o modelo de envio dos dados se "ajax" para atendimento posterior ou "chat" para abertura do chat.
BarIcon- Define o ícone do botões na barra. Pode-se utilizar as opções: "call-white", "agende-white", "email-white" ou "ps-ico-[nome do ícone da Biblioteca Básica do Guide]"
BarText- Define o texto do botão da barra flutuante.
Mobile- (opcional) Habilita um ou mais itens no celular. (Aceita "true" ou "false")
HideOnMenu- (opcional) Esconde item no menu. (Aceita "true" ou "false")
Meta.Href- (opcional) Define o endereço para o item tipo
link. Meta.Target- (opcional) Define em que tipo de janela será aberto o link. O padrão é
_blank Meta.Command- (opcional) Define o comando/função Javascript a ser executada ao clicar em item do tipo
command. Modal.Title- (opcional) Define o título do Modal.
Modal.Schedule- (opcional) Habilita o uso do campo "Melhor horário para contato". (Aceita "true" ou "false")
OpenedTime.Enabled- (opcional) Disponibiliza um item na barra conforme uma agenda de horário. Normalmente utilizado para o "chat". (Aceita "true" ou "false")
OpenedTime.Default- (opcional) Configura os horários de abertura e fechamento do item de segunda à sexta.
OpenedTime.Saturday- (opcional) Configura os horários de abertura e fechamento do item aos sábados.
OpenedTime.Sunday- (opcional) Configura os horários de abertura e fechamento do item aos domingos.
OpenedTime.AlternativeForm- (opcional) Para uso no formulário aberto, caso o item estiver fora do horário estabelecido, o envio dos dados utilizará a configuração de outro item da barra. Por exemplo: quando o chat estiver fora, utilize a função "ligue-me". (Valor corresponde ao índice do item no array, por exemplo: 0 = Ligamos para você)
Em
Appearance:Em
Itens:
5. Preencher o Checklist de Validação de Landing Pages
Utilizar o documento abaixo, que deve ser enviado para a agência que produz o html:
http://paineldecontrole.campanhaporto.com.br/docs/checklist-LP_+nome%20LP+_+data+.xlsx
Esta planilha de checkout é utilizada para validação de vários pontos que geravam erros recorrentes por parte dos fornecedores no desenvolvimento de LPs, como configuração da Barra do Multicanal, peso das imagens, utilização do Guide, teste em vários navegadores e dispositivos etc.
Ao entregar o html da LP para hospedagem, o fornecedor deve enviar também a planilha preenchida, garantindo que validou os pontos levantados. É feita também uma segunda validação pela equipe da Porto Seguro e, caso algum item não esteja de acordo, a LP é devolvida para correção.