Barra Multicanal

Inclua o código depois do script do Guide Porto Seguro:

                                    <script type="text/javascript">
    var _bmc = {
            Homolog: false, // 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: "site-institucional" // site-institucional
            },
            Itens: [
                {
                    Type: "ajax", // Ajax | Chat
                    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
                        IdProduto: 2        // (opcional) É possível sobrescrever uma configuração do "ItemDefaults"
                    },
                    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: "ajax",
                    BarIcon: "agende-white",
                    BarText: "Agende um atendimento",
                    Meta: {
                        Origem: "agendamento",
                    },
                    Metrics: {
                        GtmOpenEvent: "Agendar contato",
                        GtmSubmitEvent: "agendamento",
                    },
                    Modal: {
                        Title: "Agende um contato",
                        Schedule: true,
                    }
                }
            ]
        };
</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

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

Versão para aplicação no site institucional. (Aceita "site-institucional")

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")

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ê)

O trecho do código no boot:

                                    requirejs.config({
    paths: {
        jquery: 'https://code.jquery.com/jquery-3.3.1.min',
        jqueryUI: 'https://code.jquery.com/ui/1.11.3/jquery-ui.min', // Há um problema de dependência do Guide com o jQuery UI, por isto o Request.
        guide: 'https://www.portoseguro.com.br/visual/v.1/js/min/ps-lib.full-min',
        bmcCore: 'https://barramc.campanhaporto.com.br/v2/bmc.min.js',
        bmcConfigs: '_bmc'
    },
    shim: {
        guide: {
            deps: ["jquery","jqueryUI"],
            exports: "psLib"
        },
        bmcCore: {
            deps: ["bmcConfigs","guide"],
            exports: "BMC"
        }
    }
});

define(["bmcCore"],function() {
    console.log("code start");
});
}