Personalizar o widget Guide usando API

Você pode personalizar a aparência e o comportamento do widget Guide usando esses JavaScript API.

Ajustar o CSS

Altera os elementos CSS do widget do Guide. Faça todas as alterações de CSS em uma única chamada. Uma segunda chamada substitui as alterações da primeira chamada.

Exemplo de sintaxe:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_BACK_BUTTON"] {color: white !important; background: red !important;}');

Para ocultar um seletor de dados, use display:none. Por exemplo, para ocultar o botão de menu Guide:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');
Interface Guide seletores de dados
Widget e botões do Guide

  • GUIDE_CHANNEL_BUTTON

  • GUIDE_CHANNEL_BACK_BUTTON

  • GUIDE_SINGLE_MENU_CLOSE_BUTTON

  • GUIDE_MULTIPLE_MENU_CLOSE_BUTTON

  • GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON

  • GUIDE_FRAME_CONTENT

  • GUIDE_CHANNEL_ICON

  • GUIDE_CHANNEL_MENU_ICON
Portais

  • PORTAL_HEADER_ICON

  • PORTAL_HEADER

  • PORTAL_TITLE

  • PORTAL_SUBTITLE

  • GUIDE_CHANNEL_BUTTON_1

  • GUIDE_CHANNEL_BUTTON_2

  • GUIDE_CHANNEL_BUTTON_3

  • GUIDE_CHANNEL_BUTTON_4

  • GUIDE_MENU_BUTTON

  • KB_WIDGET_TITLE

  • KB_WIDGET_SEARCHBAR

  • KB_SEE_MORE_BUTTON

  • PORTAL_BODY

  • KB_WIDGET

  • CHANNELS_WIDGET
Artigos

  • KB_HEADER

  • KB_BODY

Chats e e-mails

  • PRECONTACT_SURVEY

  • BEGIN_CHAT

  • SEND_EMAIL

  • INPUT

  • TEXTAREA

  • DROPDOWN

  • TREE

  • PRECONTACT_SURVEY_DESCRIPTION

  • PRECONTACT_SURVEY_ICON

  • TREE_POPUP_BACK_BUTTON

  • CLOSE_TREE_POPUP

  • CLOSE

Ofertas proativas

  • OFFER_CLOSE_BUTTON

  • OFFER_HEADER

  • OFFER_BODY

  • OFFER_BUTTON_1

  • OFFER_BUTTON_2

  • OFFER_BUTTON_3

Ajustar o tamanho do botão do canal

Define o tamanho a ser usado para botões de canal. Digite um valor em ems ou pixels. O tamanho padrão do botão é 3em.

cxone('guide', 'setButtonSize', '80px');

Ajustar o deslocamento do botão do canal

Define o valor de deslocamento a ser usado para botões de canal. Digite um valor em ems ou pixels.

cxone('guide', 'setOffsetX', '48px');
cxone('guide', 'setOffsetY', '3em');

Abrir o menu Guide

Mostra o menu de botões do Guide.

cxone('guide', 'openMenu');

Fechar o menu Guide

Fecha o menu de botões do Guide.

cxone('guide', 'closeMenu');

Alterar tamanho da fonte

Define o tamanho da fonte padrão usado no widget Guide. Insira um valor em pixels. O tamanho da fonte padrão é 13 pixels. O valor definido aqui determina o tamanho em usado em todo o Guide.

cxone('guide','setFontSize',12);

Alterar altura do widget Guide

Define a altura do widget Guide. Digite um valor em ems ou pixels. A altura padrão é 40em. A altura máxima é 40 rem.

cxone('guide','setDesiredGuideHeight','30em');

Alterar largura do widget Guide

Define a largura do widget Guide. Digite um valor em ems ou pixels. A largura padrão é 23.125em.

cxone('guide','setDesiredGuideWidth','608px');

Exibir o Guide no modo de tela cheia

Você pode exibir o Guide no modo de tela cheia. O conteúdo do Guide aparece em uma janela em vez do widget Guide.

cxone('guide','setFullDisplay');

Uma prática recomendada no modo de tela cheia é ocultar o botão minimizar. Para fazer isso, use os seguintes comandos:

cxone('guide','setFullDisplay');
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');

Ocultar o Pesquisa Pré-contato do bate-papo

Use esta API para instruir o Guide para iniciar um chat sem exibir a pesquisa pré-contato na web.

cxone('guide','hidePreSurvey');

Use as APIs de chat para predefinir os valores da pesquisa pré-contato na web. Alternativamente, você pode especificá-los como parâmetros para a API hidePreSurvey. Por exemplo:

cxone('guide','hidePreSurvey', 'Dre', {email: "dre@classics.com"});

Definir valores de campo personalizados para Pesquisa pré-contato

Use este API para definir valores para campos personalizados que aparecem em uma pesquisa pré-contato. Você pode definir valores para o seguinte:

  • Nome

  • Qualquer campo personalizado de contato

  • Qualquer campo personalizado do cliente

Você pode marcar um valor de campo personalizado como hidden:true. O formulário de pesquisa pré-contato não exibe o campo oculto. Mas o valor definido para o campo oculto é passado para a janela de chat.

Para campos personalizados não marcados como hidden:false, Guide predefine os campos personalizados na pesquisa de pré-contato com os valores especificados pelo comando API. O visitante pode usar os valores padrão ou alterá-los a seu gosto.

O exemplo de sintaxe a seguir mostra como especificar um nome oculto e passado diretamente para o chat:

cxone('guide','setCustomFields', customerName: {value:"Francis", hidden: true});

O exemplo de sintaxe a seguir mostra como especificar dois valores de campo personalizado de contato. O valor e-mail fica oculto na pesquisa de pré-contato e é passado diretamente para o chat. O valor endereço é visível e pode ser editado na pesquisa pré-contato.

cxone('guide','setCustomFields', 
contactCustomFields:[
{ident:email', value: 'josey@nice.com', hidden:true}, 
{ident: 'address', value: '123 Main St', hidden:false}
]);

O exemplo de sintaxe a seguir mostra como especificar um campo personalizado do cliente:

cxone('guide','setCustomFields', 
contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]);

O exemplo de sintaxe a seguir mostra como especificar um campo personalizado de contato e um campo personalizado de cliente:

cxone('guide','setCustomFields', 
contactCustomFields:[{ident:email', value: 'josey@nice.com', hidden:true}, {ident: 'address', value: '123 Main St', hidden:false}], contactCustomerFields:[{ident: 'email', value: 'kaya.sanchez@acme.com'}]);

Exibir um ponto de entrada diretamente

Use esta API para exibir manualmente um ponto de entrada em uma janela. O botão padrão para o ponto de entrada é usado.

Esta API é fornecida para casos específicos em que alguém pode precisar mostrar manualmente um ponto de entrada em uma janela. Geralmente não é recomendado e não deve ser usado em combinação com regras de engajamento do Guide.

Para usar esta API, você deve passar o ID do ponto de entrada a ser exibido. Você pode obter o ID do ponto de entrada clicando em Editar ao lado do ponto de entrada e copiando a última parte do URL da página.

cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');