voltar
Intruções de uso para o Barramento 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 jquery antes do encerramento do HTML.
<script src="https://barramc.campanhaporto.com.br/static/manual/js/jquery.js"></script>
4. 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>
5. 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, // true | false
Modo: "fj", // f = cpf | j = cnpj | fj = cpfcnpj
Marca: "porto", // porto | azul | itau | h4p
Appearance: {
BarFontFamily: "Trebuchet MS, Arial",
ModalFontFamily: "Arial",
ModalTitleFontFamily: "Trebuchet MS, Arial"
},
Itens: [
{
Type: "ajax", // ajax | chat
BarIcon: "call-white", // call-white | call-blue | agende-white | agende-blue | email-white | email-blue | whatsapp-white | whatsapp-blue
BarText: "Ligamos para você",
BarSize: "3",
Mobile: true, // true = visível no celular | false = desabilitado no celular
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 sugerimos alterar:
- 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
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.