WebChat allows you to provide support directly on your company's website through a customized widget that makes it easier to connect with visitors. This channel is ideal for support, sales assistance, and chatbot automation. To access it, go to Settings > Channels > WebChat.

Why use WebChat?

With the channel active, you can:

• Automate interactions with chatbots
  Create automated flows to answer frequently asked questions, qualify leads, or redirect users to human support.
  Example: A customer accesses your website outside business hours and automatically receives a menu of options to obtain product information or submit a request.

• Provide support service
  Assist customers looking for help directly on your website, with speed and organization.
  Example: A customer accesses the FAQ page and, unable to find the desired answer, starts a chat with the support team to resolve the issue.

• Provide sales assistance
  Use WebChat to capture leads and guide them toward conversion.
  Example: A customer enters the website interested in purchasing a product. WebChat starts with a welcome message and offers a “View promotions” button. The customer clicks it, interacts with the chatbot, views the catalog, and is then transferred to a sales agent who completes the purchase.

With the channel active, you can:

Configure Appearance and Style

At this stage, you can configure the appearance, colors, images, dimensions, and visual style of the WebChat window.

The screen is divided into three stages:

1. Chat name

Enter the name that will be used to identify the chat.

2. Colors and Avatar

The Colors and Avatar section allows you to customize the WebChat's visual identity.

• Primary color: Defines the main color used in the WebChat interface. Enter or select the hexadecimal code of the desired color.

• Apply primary color to header: When enabled, the configured primary color will also be applied to the WebChat window header.

• Floating button color: Defines the color of the floating button used to open WebChat.

• Logo: The Logo field allows you to add an image to represent the brand or service in WebChat. To add it:

  1. Click Choose file.

  2. Select the desired image on your device.

  3. Check the selected file in the upload field. Maximum size: 42 × 42 px.

• Avatar: The Avatar field allows you to define the image used to represent the WebChat attendant, assistant, or agent. To add it:

  1. Click Choose file.

  2. Select the desired image.

  3. Confirm that the image was uploaded correctly. Maximum size: 42 × 42 px.

3. Dimensions

The Dimensions section allows you to define the size of the conversation window and its spacing.

Custom dimensions: Use the Custom dimensions toggle to enable manual configuration of the dimensions.

• Width: Defines the width of the conversation window. Example: 400 px.

• Height: Defines the height of the conversation window.

The available units are displayed next to the fields and, in the example shown, are configured as px (pixels).

• Spacing: You can configure the space between the WebChat window and the edges of the screen.

  • Bottom margin: Defines the distance between the bottom of the window and the bottom edge of the screen. Example: 16 px.

  • Right margin: Defines the distance between the right side of the window and the right edge of the screen. Example: 40 px.

• Customization using CSS: The Customize using CSS option allows you to apply CSS rules to modify the appearance of the WebChat window.

To use this feature, enable the Customize using CSS option and enter the desired properties in the Edit CSS field.

The screen also provides a link to the documentation, which can be consulted to check which elements can be customized.

CSS example

Ex h1 {
    font-size: 11px;
    color: #000;
}

Attention: Changes made using CSS may modify the default appearance of WebChat. Use rules that are compatible with the elements available in the documentation.

After that, click Next.

2. Initial Message

The Welcome message option allows you to define a message that will be displayed to the user at the beginning of the conversation.

Quick Replies

The Quick Replies option allows you to provide preconfigured options so that the user can quickly start an interaction.

• Text: Enter the text that will be displayed on the quick reply button. This text corresponds to the option that the user will see and can select.

• Payload: The Payload field allows you to enter an additional value associated with the quick reply. The payload can be used to transmit specific information to the system when the quick reply is selected.

• Add quick reply: To create more quick reply options, click Add reply +. Each added reply can have its own Text and, optionally, a Payload.

• Media addition: The Media addition option allows you to configure media content in the initial message. To configure this feature:

  1. Check the Media addition box.

  2. Expand the section using the arrow on the right.

  3. Fill in the requested information. PNG, JPG, SVG, or GIF files are accepted (max. 42 × 42 px).

Buttons (CTA)

The Buttons (CTA) section allows you to configure Call to Action buttons. The buttons can be used to present specific actions to the user directly in the initial interface. To configure:

1. Check Buttons (CTA).

2. Click the arrow to expand the section.

3. Configure the available fields.

Card

The Card option allows you to configure a visual card component to present information to the user. To use it:

1. Check the Card option.

2. Expand the section using the arrow on the right.

3. Fill in the requested information.

The card can be used to organize information and actions within a dedicated visual component.

Carousel

The Carousel option allows you to present multiple items in sequence, organized into cards that the user can browse. To configure:

1. Check the Carousel option.

2. Expand the section by clicking the arrow.

3. Configure the items displayed in the carousel.

This feature is suitable for situations where it is necessary to present more than one option to the user.

Then click Next step.

3. Behavior

This is the final stage.

1. Save conversation history

When enabled, this option allows the conversation history to be preserved. The customer can continue the conversation from where they left off if they return to the website using the same browser and device. This option is recommended when you want users to be able to resume a previous conversation without starting a new interaction when they return to the website.

3. Sound notifications

When enabled, WebChat plays a sound whenever the customer receives a new message. According to the description: A sound is played for the customer for each new message received. The user can also mute the chat directly in the chat window.

4. Screen context sharing for AI analysis

This setting allows Artificial Intelligence to receive information about the elements present on the current page to assist in analyzing the interaction context. According to the description shown on the screen, when this option is enabled:

• AI may receive information about specific page elements.

• The feature provides more accurate and contextualized information.

• AI may use elements such as HTML tags, IDs, or classes.

• The context can be used to better understand the scenario in real time.

• The feature uses only the information that has been authorized.

Finally, click Create WebChat and you're done! Your WebChat has been created.

Remember that it is now possible to record audio. In addition, WebChat provides a seamless experience with WhatsApp, allowing users to move between applications without closing the other one.

Finalizing the configuration

After completing all the steps, click Save.

All created WebChats will be saved on the channel's main screen in a list containing:

• Page title;

• WebChat ID;

• Creation date;

• Last update;

• Assigned support;

• Available actions.

Next steps

For sales assistance: Assign support

Select the agent or group responsible for the support so that all messages received through it are handled by the responsible person or team. Learn more at Assign account support.

Configure embed

You can add WebChat to your website in two different ways:

• Snippet: Copy the generated code to embed WebChat directly into your website's HTML.

• Link: Copy the WebChat's direct URL, which is useful for opening the chat in a new tab or redirecting users from a button, for example.

Learn more at How to publish your WebChat flow.