Tutorial: Personalizando o tamanho e a posição do bate-papo na Web

Este tutorial mostra como você pode alterar o tamanho e a posição do bate-papo na Web renderizando-o em um elemento personalizado.

Para obter uma versão completa e funcional do exemplo descrito neste tutorial, consulte Elementos personalizados para chat na web com assistente de IA.

Por padrão, a interface de bate-papo na Web em seu site é renderizada em um elemento " div do host que é estilizado para aparecer em um local fixo na página. Se quiser alterar o tamanho ou a posição do bate-papo na Web, você poderá especificar um elemento personalizado como o local do host para o bate-papo na Web. Esse elemento de host é usado como local para a interface principal do bate-papo na Web e para o inicializador do bate-papo na Web (a menos que você esteja usando um inicializador personalizado).

Ao usar um elemento personalizado, você também assume o controle de mostrar e ocultar o bate-papo na Web quando ele é aberto ou fechado (como quando o cliente clica no ícone do iniciador ou no botão minimizar). Isso lhe dá a oportunidade de aplicar efeitos adicionais, como animações de abertura e fechamento. Você pode controlar a exibição e o ocultamento da janela principal usando as funções ` addClassName( )` e ` removeClassName( )`.

Para usar um elemento personalizado, siga estas etapas:

1. No código do seu site, defina o elemento personalizado no qual deseja que o bate-papo na Web seja renderizado. Há muitas maneiras de fazer isso, dependendo da estrutura que você estiver usando. Um exemplo simples é definir um elemento HTML vazio com um ID:

    <div id="WebChatContainer"></div>

1. Obtenha uma referência ao seu elemento personalizado para que você possa fazer referência a ele na configuração do bate-papo na Web. Para obter uma referência, use o mecanismo que fizer sentido para a biblioteca que estiver usando. Por exemplo, você pode salvar a referência retornada de ' document.createElement() ou pode usar uma função de consulta para procurar o elemento no DOM. Este exemplo procura o elemento usando o ID que atribuímos a ele:

    const customElement = document.querySelector('#WebChatContainer');

1. No script de incorporação do bate-papo na Web, defina a propriedade ' element, especificando a referência ao seu elemento personalizado.

    window.watsonAssistantChatOptions = {
      integrationID: "YOUR_INTEGRATION_ID",
      region: "YOUR_REGION",
      serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",
    
      // The important piece.
      element: customElement,
    
      onLoad: function(instance) {
        instance.render();
      }
    };

1. Certifique-se de que a janela principal do bate-papo na Web esteja oculta por padrão. Você pode fazer isso no manipulador de eventos " onLoad, depois que " render tiver sido chamado. Você também deve adicionar manipuladores para ouvir o evento ' view:change para que o cliente possa abrir e fechar o bate-papo na Web depois que a página for carregada. No nosso exemplo, estamos usando uma classe CSS chamada HideWebChat para fazer isso (consulte o exemplo completo para ver a definição dessa classe):

    function onLoad(instance) {
      instance.render();
      instance.on({ type: 'view:change', handler: viewChangeHandler });
      instance.elements.getMainWindow().addClassName('HideWebChat');
    }

1. Crie manipuladores para ocultar e mostrar a janela principal do bate-papo na Web em resposta ao evento ' view:change. Este exemplo simplesmente mostra e oculta o elemento; o exemplo completo mostra como você pode adicionar efeitos de animação.

    function viewChangeHandler(event, instance) {
      if (event.newViewState.mainWindow) {
        instance.elements.getMainWindow().removeClassName('HideWebChat');
      } else {
        instance.elements.getMainWindow().addClassName('HideWebChat');
      }
    }

Para obter o código funcional completo, consulte o exemplo de elementos personalizados para o chat na web com assistente de IA.