The Web Widget embeds a branded chat bubble on any website. Visitors can talk to your agent directly, no login required on their end. Setup takes three steps and requires no coding knowledge.

What you'll do

Configure: select an agent and paste your API key

Customize: style the widget to match your brand

Embed: copy the script tag and paste it into your site

Configure the Widget

1. Go to Integrations → Web Widget.
2. Select which agent will handle widget conversations from the Agent dropdown.
3. Copy a key from the API Key tab and paste it into the API Key field. Make sure the key's domain restrictions (if any) include your website's domain.

perfect10.id/integration

Web Widget page with agent selector and API key input field

Generate an API Key

Customize the Appearance

A live preview on the right updates as you make changes:

Option	Description
Agent Image	Avatar shown in the chat header.
Agent Banner	Banner image behind the agent name.
Accent	Primary color for the chat bubble button and send button.
Agent / Visitor Message colors	Background and text color for message bubbles.

Click Reset to restore all colors to their defaults.

perfect10.id/integration

Customization panel on the left with color pickers and a live widget preview on the right

Click Preview Widget (requires an agent and API key) to open a live, interactive test before embedding it anywhere.

Embed on Your Website

1. A <script> snippet is generated automatically at the bottom of the page. Click Copy Snippet.
2. Paste it into your website's HTML just before the closing </body> tag.
3. Deploy your site — the chat bubble appears as soon as the script loads.

perfect10.id/integration

Embed section showing the generated script tag with a Copy Snippet button

If you change the agent, delete the API key, or update domain restrictions, regenerate the snippet and update it on your website.