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:

Itens padrão
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
Caso não seja passado nenhum valor, o script da Barra utiliza o valor "porto".
Em ItemDefaults:
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.

Configurações opcionais

Em Appearance:
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.
Em Itens:
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ê)
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.