voltar

Intruções de uso para o
Link na página ou Formulário Aberto 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 (opcional)
            },
            Itens: [
                {
                    Type: "ajax", // ajax | chat | link | command
                    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")
                    Meta: {
                        Origem: "ligue-me" // Parâmetro de origem
                    },
                    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: "chat",
                    BarIcon: "chat-white",
                    BarText: "Atendimento via Chat",
                    Meta: {
                        Origem: "chat",
                    },
                    Metrics: {
                        GtmOpenEvent: "Cotação via Chat",
                        GtmSubmitEvent: "chat"
                    },
                    Modal: {
                        Title: "Atendimento via Chat"
                    },
                    OpenedTime: { // (opcional) Habilita horários para apresentação do item na barra
                        Enabled: true, // (opcional) Padrão é false
                        Default: {  // Dias comuns, de segunda à sexta
                            Start: "08:30",
                            End: "15:00"
                        },
                        Saturday: { // Se houver funcionamento aos sábados
                            Enabled: true,
                            Start: "10:30",
                            End: "16:00"
                        },
                        Sunday: {   // Se houver funcionamento aos domingos
                            Enabled: false
                        },
                        AlternativeForm: 0  // Para uso no formulário aberto, caso o chat estiver fechado o método passa a ser o de outro item da barra. Utilize como valor o índice do array de Itens, por exemplo 2 = Agende um atendimento
                    }
                },
                {
                    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")
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. Incluir o Link de abertura do modal ou o Formulário Aberto em sua página

Para o link de abertura do modal

Para incluir o formulário aberto, inclua o código abaixo:

                                    <a href="javascript:;" class="ps-btn bmc-trigger" data-trigger="#bmc-item-1">Texto</a> // data-trigger = ID do item da barra a ser disparado
<a href="javascript:;" class="ps-btn bmc-trigger" data-sendform="ligue-me" data-modo="j" >Texto</a> // data-sendform = Qual configuração vai ser carregada
                                

Configurações

No .bmc-trigger
data-sendform
Define qual configuração deve ser carregada pela barra. Por exemplo: se o valor for "chat", a configuração deverá ser carregada a partir do item da que tem o campo "Origem" com valor "chat".
data-trigger
ID do item da barra. Por exemplo: #bmc-item-0
data-referencia
Substitui configuração de referência especificamente para o link.
data-canal
Substitui configuração de canal especificamente para o link.
data-id_produto
Substitui configuração de id-produto especificamente para o link.
data-id_tipo_produto
Substitui configuração de id-tipo-produto especificamente para o link.
data-id_ramo
Substitui configuração de id-ramo especificamente para o link.
data-modo
Redefine a configuração de tipo de pessoa especificamente para o link. Os valor possíveis são "f", "j" ou "fj".



Para o formulário aberto

Inclua o código abaixo:

                                    <form data-conversion="form-chat" class="bmc-open-form track-submit" data-sendform="chat">
    <div class="ps-row">
        <div class="ps-mod8 ps-sm-mod6 ps-frm-row">
            <input id="pessoa-fisica1" class="ps-frm-radio bmc-action-set-profile" type="radio" name="pessoa" value="f" checked><label class="ps-frm-radio" for="pessoa-fisica1">Pessoa Física</label>
        </div>
        <div class="ps-mod8 ps-sm-mod6 ps-frm-row">
            <input id="pessoa-juridica1" class="ps-frm-radio bmc-action-set-profile" type="radio" name="pessoa" value="j"><label class="ps-frm-radio" for="pessoa-juridica1">Pessoa Jurídica</label>
        </div>
    </div>
    <div class="ps-row">
        <div class="ps-mod8 ps-sm-mod12 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="nome1">Nome</label>
            <input type="text" class="ps-frm-entry ps-frm-valid" name="nome" id="nome1">
        </div>
        <div class="ps-mod8 ps-sm-mod7 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="email1">E-mail</label>
            <input type="email" class="ps-frm-entry ps-frm-email ps-frm-valid" name="email" id="email1">
        </div>
        <div class="ps-mod8 ps-sm-mod5 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="tel1">Telefone</label>
            <input type="tel" class="ps-frm-entry ps-frm-celPhone ps-frm-valid" name="tel" id="tel1" autocomplete="off">
        </div>
        <div class="ps-mod8 ps-sm-mod7 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="cep1">CEP</label>
            <input type="tel" class="ps-frm-entry ps-frm-zipcode ps-frm-valid" name="cep" id="cep1" maxlength="9" autocomplete="off">
        </div>
        <div class="ps-mod8 ps-sm-mod5 bmc-modal-form-block ps-frm-row bmc-form-pf">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="cpf1">CPF</label>
            <input type="text" class="ps-frm-entry ps-frm-cpf ps-frm-valid" name="cpf" id="cpf1" maxlength="14" autocomplete="off">
        </div>
        <div class="ps-mod8 ps-sm-mod5 bmc-modal-form-block ps-frm-row bmc-form-pj" style="display: none;">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="cnpj1">CNPJ</label>
            <input type="tel" class="ps-frm-entry ps-frm-cnpj ps-frm-valid" name="cnpj" id="cnpj1" maxlength="14" autocomplete="off">
        </div>
        <div class="ps-mod8 ps-sm-mod12 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal ps-frm-lbl-focus bmc-frm-lbl-select">Melhor horário para atendimento</label>
            <div class="ps-frm-select">
                <select name="horario_ligacao">
                    <option>Qualquer horário</option>
                    <option>Período da manhã</option>
                    <option>Período da tarde</option>
                </select>
            </div>
        </div>
        <div class="ps-mod8 ps-sm-mod12">
            <button type="submit" class="ps-btn ps-btn-primary bmc-form-submit">
                <span class="bmc-submit-text">Continuar</span>
                <span class="bmc-submit-loading bmc-ico-loading"></span>
            </button>
        </div>
    </div>
</form>
                                

Configurações

No <form>
data-sendform
Define qual configuração deve ser carregada pela barra. Por exemplo: se o valor for "chat", a configuração deverá ser carregada a partir do item da que tem o campo "Origem" com valor "chat".
data-conversion
[Precisamos ver com o pessoal de métricas]
Customizações HTML
Formulário para um só tipo de pessoa
Substitua o trecho com os "inputs radio" pelo campo hidden.
<input type="hidden" name="pessoa" value="f">
Utilize como valor, "f" (pessoa física) ou "j" (pessoa jurídica).

Deixe visível somente o bloco com o campo "CPF" ou "CNPJ" correspondente.
Uso do campo de agendamento
O campo "Melhor horário para atendimento" é de uso opcional.
Se desejar, seu bloco pode ser retirado.


Exemplo de formulário para somente pessoa jurídica e sem campo de agendamento:

                                    <form data-conversion="form-chat" class="bmc-open-form track-submit" data-sendform="chat">
    <input type="hidden" name="pessoa" value="j">
    <div class="ps-row">
        <div class="ps-mod8 ps-sm-mod12 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="nome1">Nome</label>
            <input type="text" class="ps-frm-entry ps-frm-valid" name="nome" id="nome1">
        </div>
        <div class="ps-mod8 ps-sm-mod7 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="email1">E-mail</label>
            <input type="email" class="ps-frm-entry ps-frm-email ps-frm-valid" name="email" id="email1">
        </div>
        <div class="ps-mod8 ps-sm-mod5 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="tel1">Telefone</label>
            <input type="tel" class="ps-frm-entry ps-frm-celPhone ps-frm-valid" name="tel" id="tel1" autocomplete="off">
        </div>
        <div class="ps-mod8 ps-sm-mod7 ps-frm-row">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="cep1">CEP</label>
            <input type="tel" class="ps-frm-entry ps-frm-zipcode ps-frm-valid" name="cep" id="cep1" maxlength="9" autocomplete="off">
        </div>
        <div class="ps-mod8 ps-sm-mod5 bmc-modal-form-block ps-frm-row bmc-form-pj">
            <label class="ps-frm-lbl ps-frm-lbl-internal" for="cnpj1">CNPJ</label>
            <input type="tel" class="ps-frm-entry ps-frm-cnpj ps-frm-valid" name="cnpj" id="cnpj1" maxlength="14" autocomplete="off">
        </div>
        <div class="ps-mod8 ps-sm-mod12">
            <button type="submit" class="ps-btn ps-btn-primary bmc-form-submit">
                <span class="bmc-submit-text">Continuar</span>
                <span class="bmc-submit-loading bmc-ico-loading"></span>
            </button>
        </div>
    </div>
</form>