Widget: Embed your Text Agent on a Website

In this section, we explain the step-by-step process to deploy your text agent on a website with the Widget feature.

Currently, you can deploy your text agent on WhatsApp Business and on a web page through a widget.

Your Text Agent on a Website

Within your agent, click on Channels and choose Dapta Widget.

Now, we’ll go step-by-step to configure the widget that you can embed on any website.

• Agent ID: This code is provided by default. It is the unique identifier for your text agent.

• Embedded: The line of code you must copy and paste into the HTML code of the website where you want to embed your text agent.

• Additional Instructions:

These instructions are optional and allow your agent to read parameters to better understand additional conversation context. These instructions will be added to every message a customer sends so your agent can use them for extra context. If you configure conversation parameters using the setConversationParams(object) function on the client side, you can use them here.

Add this script to your code so you can use conversation parameters as variables here. By default, you have these parameters:

• user_id: User ID

• user_name: User Name

• user_email: User Email

Voice Agent

Dapta provides this great alternative: within your text agent, you have a tab so that if your customer prefers, you can initiate a call:

• In this Voice Agent section, you can select the AI agent's voice that will perform the call.

The agent you select will be the one who calls the users who register their contact information in this section (Phone Number, Contact Name and Contact Email)

Welcome Message

Here, you can edit a brief description of how the text agent should start the conversation with your users.

Default Questions:

In this section, you can add actionable questions that appear as clickable options for the user. These are very helpful for starting a conversation with your agent.

You can do this in two ways:

• Add an Example Question Manually

• Click "+ Add Example" and type the question you'd like your agent to appear. You can add as many questions as you want, but always keep the user experience in mind.

• Click "Save Changes," and when you return to the Widget, you'll see the questions now appear in your agent.

• Generate Questions with AI

• Click the "Generate with AI" option, and our AI will generate suggested questions based on the context and instructions to help your users start interacting with your agent.

• Click "Save Changes," and when you return to the Widget, you'll see the questions now appear in your agent.

Widget Style

In this section, you can edit the widget's style. The basic method involves choosing a custom primary color and light or dark background colors.

Advanced Style

The advanced method uses the stylesheet by writing the CSS script.

Auto Open

The "Auto Open" option lets you choose whether it opens automatically on specific pages by default. Separate the pages where you want your widget to appear with the "/" symbol.

If left blank, it will open automatically on all pages upon refresh.