voltar
Intruções de uso para o
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:
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")
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. 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
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".
No
.bmc-triggerPara 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
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]
- 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.
No
<form>Customizações HTML
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>