Barra Multicanal

voltar

Intruções de uso para o Formulário Aberto v.1.1

---

Caminho da barra.

                        https://barramc.campanhaporto.com.br/v1.1/bmc.min.js
                    

---

Incluindo a barra na sua página

1. Inserir CSS do guide da Porto Seguro.

                        <link href="https://www.portoseguro.com.br/visual/v.1/css/ps-lib.core-min.css" rel="stylesheet" type="text/css" media="screen" />
                    

2. Inserir no HEAD a fonte "Open Sans" e "Open Sans Condensed".

                        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">
                    

3. Inserir script do guide da Porto Seguro.

                        <script src="https://www.portoseguro.com.br/visual/v.1/js/min/ps-lib.core-min.js"></script>
                    

Adicionar css com cor do erro, caso campo não seja preenchido ou esteja errado.

                        .contactForm input.ap-formerror, .ap-formerror {
    border: 1px solid #ff8989 !important;
}
                    

4. Exemplo de formulário para Chat. (Pessoa Física e Jurídica)

                        <form action="" data-conversion="form-ligamos" class="ap-row track-submit" method="post" onsubmit="return sendForm(this,'chat')" id="formLigue">
    <input type="hidden" value="f" name="tipo_pessoa" id="tipo_pessoa1" />
    <input type="hidden" value="hml_barramc_chat" name="referencia" id="referencia1" />
    <input type="hidden" value="" name="idproduto" id="idproduto1" />
    <input type="hidden" value="" name="idtipoproduto" id="idtipoproduto1" />
    <input type="hidden" value="" name="idramo" id="idramo1" />
    <input onclick="opChangeField(this);" id="pessoa-fisica1" class="ps-frm-radio" type="radio" name="pessoa" value="f" checked>
    <label id="label-inline" class="ps-frm-radio" for="pessoa-fisica1">Pessoa Física</label>
    <br/>
    <input onclick="opChangeField(this);" id="pessoa-juridica1" class="ps-frm-radio" type="radio" name="pessoa" value="j">
    <label id="label-inline" class="ps-frm-radio" for="pessoa-juridica1">Pessoa Jurídica</label>
    <br/>
    <label for="nome1">Nome:</label>
    <input type="text" class="form-control" name="nome" id="nome1">
    <br/>
    <label for="email1">E-mail:</label>
    <input type="text" class="form-control" name="email" id="email1">
    <br/>
    <label for="tel1">Telefone:</label>
    <input type="text" class="form-control" name="tel" id="tel1" maxlength="15" autocomplete="off">
    <br/>
    <label for="cep1">Cep:</label>
    <input type="text" class="form-control" name="cep" id="cep1" maxlength="9" autocomplete="off">
    <br/>
    <label for="cpf1">CPF:</label>
    <input type="text" class="form-control" name="cpf" id="cpf1" maxlength="14" autocomplete="off">
    <br/>
    <label for="cnpj1">CNPJ</label>
    <input type="text" class="form-control" name="cnpj" id="cnpj1" maxlength="14" autocomplete="off">
    <br/>
    <input type="submit" class="btn btn-info" value="Confirmar agendamento">
    <br/>
</form>
                    

Onde:

sendForm(this,'chat')

Define o envio do formulário para o Barramento via Chat

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

tipo_pessoa

Pessoa Física ou Jurídica. (Aceita f = cpf, j = cnpj), mudar para "j" caso só houver pessoa Jurídica.

referencia

Especificar um valor inicial para o parâmetro referencia. É ele que identifica o ambiente e a campanha de onde está vindo o lead.

Exemplo de formulário para Chat. (Pessoa Física)

                        <form action="" data-conversion="form-ligamos" class="ap-row track-submit" method="post" onsubmit="return sendForm(this,'chat')" id="formLigue">
    <input type="hidden" value="f" name="tipo_pessoa" id="tipo_pessoa1" />
    <input type="hidden" value="hml_barramc_chat" name="referencia" id="referencia1" />
    <input type="hidden" value="f" name="pessoa" id="pessoa1" />
    <input type="hidden" value="" name="horario_ligacao" id="horario_ligacao1" />
    <input type="hidden" value="" name="idproduto" id="idproduto1" />
    <input type="hidden" value="" name="idtipoproduto" id="idtipoproduto1" />
    <input type="hidden" value="" name="idramo" id="idramo1" />
    <input type="hidden" value="" name="cnpj" id="cnpj1" />
    <label for="nome1">Nome:</label>
    <input type="text" class="form-control" name="nome" id="nome1">
    <br/>
    <label for="email1">E-mail:</label>
    <input type="text" class="form-control" name="email" id="email1">
    <br/>
    <label for="tel1">Telefone:</label>
    <input type="text" class="form-control" name="tel" id="tel1" maxlength="15" autocomplete="off">
    <br/>
    <label for="cep1">Cep:</label>
    <input type="text" class="form-control" name="cep" id="cep1" maxlength="9" autocomplete="off">
    <br/>
    <label for="cpf1">CPF:</label>
    <input type="text" class="form-control" name="cpf" id="cpf1" maxlength="14" autocomplete="off">
    <br/>
    <input type="submit" class="btn btn-info" value="Confirmar agendamento">
    <br/>
</form>
                    

Onde:

sendForm(this,'chat')

Define o envio do formulário para o Barramento via Chat

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

tipo_pessoa

Pessoa Física ou Jurídica. (Aceita f = cpf, j = cnpj), mudar para "j" caso só houver pessoa Jurídica.

referencia

Especificar um valor inicial para o parâmetro referencia. É ele que identifica o ambiente e a campanha de onde está vindo o lead.

Exemplo de formulário para Chat. (Pessoa Jurídica)

                        <form action="" data-conversion="form-ligamos" class="ap-row track-submit" method="post" onsubmit="return sendForm(this,'chat')" id="formLigue">
    <input type="hidden" value="f" name="tipo_pessoa" id="tipo_pessoa1" />
    <input type="hidden" value="hml_barramc_chat" name="referencia" id="referencia1" />
    <input type="hidden" value="f" name="pessoa" id="pessoa1" />
    <input type="hidden" value="" name="horario_ligacao" id="horario_ligacao1" />
    <input type="hidden" value="" name="idproduto" id="idproduto1" />
    <input type="hidden" value="" name="idtipoproduto" id="idtipoproduto1" />
    <input type="hidden" value="" name="idramo" id="idramo1" />
    <input type="hidden" value="" name="cpf" id="cpf1" />
    <label for="nome1">Nome:</label>
    <input type="text" class="form-control" name="nome" id="nome1">
    <br/>
    <label for="email1">E-mail:</label>
    <input type="text" class="form-control" name="email" id="email1">
    <br/>
    <label for="tel1">Telefone:</label>
    <input type="text" class="form-control" name="tel" id="tel1" maxlength="15" autocomplete="off">
    <br/>
    <label for="cep1">Cep:</label>
    <input type="text" class="form-control" name="cep" id="cep1" maxlength="9" autocomplete="off">
    <br/>
    <label for="cnpj1">CNPJ</label>
    <input type="text" class="form-control" name="cnpj" id="cnpj1" maxlength="14" autocomplete="off">
    <br/>
    <input type="submit" class="btn btn-info" value="Confirmar agendamento">
    <br/>
</form>
                    

Onde:

sendForm(this,'chat')

Define o envio do formulário para o Barramento via Chat

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

tipo_pessoa

Pessoa Física ou Jurídica. (Aceita f = cpf, j = cnpj), mudar para "j" caso só houver pessoa Jurídica.

referencia

Especificar um valor inicial para o parâmetro referencia. É ele que identifica o ambiente e a campanha de onde está vindo o lead.

Exemplo de formulário para Ligue-me. (Pessoa Física e Jurídica)

                        <form action="" data-conversion="form-ligamos" class="ap-row track-submit" method="post" onsubmit="return sendForm(this,'ligue-me')" id="formLigue">
    <input type="hidden" value="f" name="tipo_pessoa" id="tipo_pessoa2" />
    <input type="hidden" value="hml_barramc_ligueme" name="referencia" id="referencia2" />
    <input type="hidden" value="" name="idproduto" id="idproduto2" />
    <input type="hidden" value="" name="idtipoproduto" id="idtipoproduto2" />
    <input type="hidden" value="" name="idramo" id="idramo2" />
    <input onclick="opChangeField(this);" id="pessoa-fisica2" class="ps-frm-radio" type="radio" name="pessoa" value="f" checked>
    <label id="label-inline" class="ps-frm-radio" for="pessoa-fisica2">Pessoa Física</label>
    <br/>
    <input onclick="opChangeField(this);" id="pessoa-juridica2" class="ps-frm-radio" type="radio" name="pessoa" value="j">
    <label id="label-inline" class="ps-frm-radio" for="pessoa-juridica2">Pessoa Jurídica</label>
    <br/>
    <label for="nome2">Nome:</label>
    <input type="text" class="form-control" name="nome" id="nome2">
    <br/>
    <label for="email2">E-mail:</label>
    <input type="text" class="form-control" name="email" id="email2">
    <br/>
    <label for="tel2">Telefone:</label>
    <input type="text" class="form-control" name="tel" id="tel2" maxlength="15" autocomplete="off">
    <br/>
    <label for="cep2">Cep:</label>
    <input type="text" class="form-control" name="cep" id="cep2" maxlength="9" autocomplete="off">
    <br/>
    <label for="cpf2">CPF:</label>
    <input type="text" class="form-control" name="cpf" id="cpf2" maxlength="14" autocomplete="off">
    <br/>
    <label for="cnpj2">CNPJ</label>
    <input type="text" class="form-control" name="cnpj" id="cnpj2" maxlength="14" autocomplete="off">
    <br/>
    <select name="horario_ligacao" class="form-control">
        <option>Qualquer horário</option>
        <option>Período da manhã</option>
        <option>Período da tarde</option>
    </select>
    <br/>
    <input type="submit" class="btn btn-info" value="Confirmar agendamento">
    <br/>
</form>
                    

Onde:

sendForm(this,'ligue-me')

Define o envio do formulário para o Barramento via Ligue-me

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

tipo_pessoa

Pessoa Física ou Jurídica. (Aceita f = cpf, j = cnpj), mudar para "j" caso só houver pessoa Jurídica.

referencia

Especificar um valor inicial para o parâmetro referencia. É ele que identifica o ambiente e a campanha de onde está vindo o lead.

Exemplo de formulário para Ligue-me. (Pessoa Física)

                        <form action="" data-conversion="form-ligamos" class="ap-row track-submit" method="post" onsubmit="return sendForm(this,'chat')" id="formLigue">
        <input type="hidden" value="f" name="tipo_pessoa" id="tipo_pessoa2" />
        <input type="hidden" value="hml_barramc_chat" name="referencia" id="referencia2" />
        <input type="hidden" value="f" name="pessoa" id="pessoa2" />
        <input type="hidden" value="" name="horario_ligacao" id="horario_ligacao2" />
        <input type="hidden" value="" name="idproduto" id="idproduto2" />
        <input type="hidden" value="" name="idtipoproduto" id="idtipoproduto2" />
        <input type="hidden" value="" name="idramo" id="idramo2" />
        <input type="hidden" value="" name="cnpj" id="cnpj2" />
        <label for="nome1">Nome:</label>
        <input type="text" class="form-control" name="nome" id="nome2">
        <br/>
        <label for="email1">E-mail:</label>
        <input type="text" class="form-control" name="email" id="email2">
        <br/>
        <label for="tel1">Telefone:</label>
        <input type="text" class="form-control" name="tel" id="tel2" maxlength="15" autocomplete="off">
        <br/>
        <label for="cep1">Cep:</label>
        <input type="text" class="form-control" name="cep" id="cep2" maxlength="9" autocomplete="off">
        <br/>
        <label for="cpf1">CPF:</label>
        <input type="text" class="form-control" name="cpf" id="cpf2" maxlength="14" autocomplete="off">
        <br/>
        <select name="horario_ligacao" class="form-control">
            <option>Qualquer horário</option>
            <option>Período da manhã</option>
            <option>Período da tarde</option>
        </select>
        <br/>
        <input type="submit" class="btn btn-info" value="Confirmar agendamento">
        <br/>
    </form>
                    

Onde:

sendForm(this,'ligue-me')

Define o envio do formulário para o Barramento via Ligue-me

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

tipo_pessoa

Pessoa Física ou Jurídica. (Aceita f = cpf, j = cnpj), mudar para "j" caso só houver pessoa Jurídica.

referencia

Especificar um valor inicial para o parâmetro referencia. É ele que identifica o ambiente e a campanha de onde está vindo o lead.

Exemplo de formulário para Ligue-me. (Pessoa Jurídica)

                        <form action="" data-conversion="form-ligamos" class="ap-row track-submit" method="post" onsubmit="return sendForm(this,'chat')" id="formLigue">
    <input type="hidden" value="f" name="tipo_pessoa" id="tipo_pessoa2" />
    <input type="hidden" value="hml_barramc_chat" name="referencia" id="referencia2" />
    <input type="hidden" value="f" name="pessoa" id="pessoa2" />
    <input type="hidden" value="" name="horario_ligacao" id="horario_ligacao2" />
    <input type="hidden" value="" name="idproduto" id="idproduto2" />
    <input type="hidden" value="" name="idtipoproduto" id="idtipoproduto2" />
    <input type="hidden" value="" name="idramo" id="idramo2" />
    <input type="hidden" value="" name="cpf" id="cpf2" />
    <label for="nome1">Nome:</label>
    <input type="text" class="form-control" name="nome" id="nome2">
    <br/>
    <label for="email1">E-mail:</label>
    <input type="text" class="form-control" name="email" id="email2">
    <br/>
    <label for="tel1">Telefone:</label>
    <input type="text" class="form-control" name="tel" id="tel2" maxlength="15" autocomplete="off">
    <br/>
    <label for="cep1">Cep:</label>
    <input type="text" class="form-control" name="cep" id="cep2" maxlength="9" autocomplete="off">
    <br/>
    <label for="cnpj1">CNPJ</label>
    <input type="text" class="form-control" name="cnpj" id="cnpj2" maxlength="14" autocomplete="off">
    <br/>
    <select name="horario_ligacao" class="form-control">
        <option>Qualquer horário</option>
        <option>Período da manhã</option>
        <option>Período da tarde</option>
    </select>
    <br/>
    <input type="submit" class="btn btn-info" value="Confirmar agendamento">
    <br/>
</form>
                    

Onde:

sendForm(this,'ligue-me')

Define o envio do formulário para o Barramento via Ligue-me

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

tipo_pessoa

Pessoa Física ou Jurídica. (Aceita f = cpf, j = cnpj), mudar para "j" caso só houver pessoa Jurídica.

referencia

Especificar um valor inicial para o parâmetro referencia. É ele que identifica o ambiente e a campanha de onde está vindo o lead.

Inserir script do jquery antes do encerramento do HTML.

                        <script src="https://barramc.campanhaporto.com.br/static/manual/js/jquery.js"></script>
                    

Inserir script de configuração e carregamento da Barra.

                        <script type="text/javascript">
    /* Definir dados de produto */
    var idproduto = 1;
    var idtipoproduto = 1;
    var idramo = 27;

    _bmc = {
        Homolog: false,
        Modo: "fj", // f = cpf | j = cnpj | fj = cpfcnpj
        Marca: "porto",
        Appearance: {
            BarFontFamily: "Trebuchet MS, Arial",
            ModalFontFamily: "Arial",
            ModalTitleFontFamily: "Trebuchet MS, Arial"
        },
        Itens: [
            {
                Type: "ajax",
                BarIcon: "call-white",
                BarText: "Ligamos para você",
                BarSize: "3",
                Mobile: true,
                Meta: {
                    Origem: "ligue-me",
                    IdProduto: idproduto,
                    IdTipoProduto: idtipoproduto,
                    IdRamo: idramo,
                    Referencia: "sitePorto-calculeContrate",
                },
                Metrics: {
                    GtmOpenEvent: "Solicitar contato",
                    GtmSubmitEvent: "ligue-me",
                    ConversionCode: "iframe::https://institucional.portoseguro.com.br/conteudo/seguros/seguro-de-veiculos/seguro-de-automovel/ligamos-para-voce-sucesso.html;;"
                },
                Modal: {
                    Title: "Ligamos para você:",
                    Schedule: false
                },
            },
            {
                Type: "chat",
                BarIcon: "chat-white",
                BarText: "Atendimento via Chat",
                BarSize: "3",
                Meta: {
                    Origem: "chat",
                    IdProduto: idproduto,
                    IdTipoProduto: idtipoproduto,
                    IdRamo: idramo,
                    Referencia: "sitePorto-calculeContrate",
                },
                Metrics: {
                    GtmOpenEvent: "Cotação via Chat",
                    GtmSubmitEvent: "chat"
                },
                Modal: {
                    Title: "Atendimento via Chat:",
                    ButtonText: "Entrar"
                },
                OpenedTime: {
                    Enabled: true,
                    ShowIcon: true,
                    Title: "Chat Indisponível",
                    Message: "No momento, nossos corretores não estão disponíveis. Deixe seus dados para que entremos contato o mais breve possível.",
                    Action: "Envie-nos uma mensagem",
                    Default: {
                        Start: "08:30",
                        End: "21:00"
                    },
                    Saturday: {
                        Enabled: true,
                        Start: "10:30",
                        End: "16:00"
                    },
                    Sunday: {
                        Enabled: false
                    },
                    AlternativeForm: 2
                }
            }
        ]
    };
    (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/v1.1/bmc.min.js');
</script>
                    

Onde:

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

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)

Itens

Array com dados possíveis da barra, define os tipos de contatos possíveis. (Aceita: ligue-me, chat e agendamento)

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”.

Inserir no final a chamada do JS que gerencia o formulário e as máscaras de campos.

                        <script src="https://barramc.campanhaporto.com.br/static/js/mask.js"></script>
<script src="https://barramc.campanhaporto.com.br/static/js/open_form.min.js"></script>
                    

---

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.