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.