Como usar o recurso de mensagens no ChatBotKit Widget

Welcome to our comprehensive guide on how to utilize the messages feature in the ChatBotKit AI Widget. This feature allows to add additional messages at the beginning of the conversation session to convey contextual information about the user. For example, you may want to preempt your bot with some user information such as their name or even the kind of problem they are experiencing.

Below, we will walk you through the process from creating a new website widget, to embedding it into your website, initializing the widget with some message. Let's get started!

Etapa 1: Crie um novo widget de site

1. Navegue até Integrações e clique no botão Criar integração de widget.
2. Preencha o nome e a descrição opcional.
3. Conecte-se a um bot existente ou selecione um Backstory, Model, Dataset e Skillset.
4. Salve a integração clicando no botão Create (Criar ).

Etapa 2: Incorporar o widget em seu site

1. Clique no botão Instalar.
2. Copy the widget snippet (code).
3. Cole o snippet em seu site.

Step 3: Initialize the ChatBotKit Widget with Messages

Once you have the widget installed on your website, you can initialize it with custom messages. This can be done programmatically using the chatbotkitWidget.instance objeto.

Here's an example of initializing the widget with metadata:

chatbotkitWidget.instance.messages = [
  {type: 'user', text: 'My name is Bob!'}
  // other relevant messages
]

In the above example, we only create a single message that communicates to the bot that the current user’s name is Bob. We can add more messages but beware that the widget can only initialise chat sessions with just the user message type. This is done for security reasons.

You can also pass the messages right inside the properties when embedding the widget SDK. Here are two additional methods you can use for that:

Incorporação por meio do Widget SDK

Com esse método, passamos um objeto codificado em JSON diretamente para o atributo de metadados do Widget SDK. As informações serão coletadas automaticamente e usadas para inicializar o widget.

<script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{WIDGET_ID}" data-messages="[{&quot;type&quot;:&quot;user&quot;,&quot;text&quot;:&quot;My name is Bob!&quot;}]"></script>

Incorporação por meio do elemento Widget

Com esse método, passamos um objeto codificado em JSON diretamente para o atributo meta do elemento HTML Widget. Observe que incluímos o SDK, mas inicializamos o widget manualmente usando HTML.

<script src="https://static.chatbotkit.com/integrations/widget/v2.js"></script>
<chatbotkit-widget widget="{WIDGET_ID}" meta="[{&quot;type&quot;:&quot;user&quot;,&quot;text&quot;:&quot;My name is Bob!&quot;}]"/>

Just like that we now can automatically communicate to the bot some additional information that may become relevant in the conversation.