Direct Sale AI

Chat Widget

Official guide · English · Version 9c253d0cf11816df

The Chat Widget is a JavaScript-based chat interface that you embed on your website. It allows visitors to interact with your AI sales assistant directly from any page on your site. This section covers API key management, appearance customization, domain security, and the installation process.

Accessing Widget Settings

Navigate to Dashboard > Widget from the sidebar to access the widget configuration page.

API Key Management

An API key is required for the widget to authenticate with your account. Without it, the widget cannot connect to your chatbot.

Generating an API Key

  1. In the API Key section, click Generate API Key (or Generate New Key if you already have one).
  2. The newly generated key is displayed in a highlighted box.
  3. Copy the key immediately -- it is shown only once for security reasons.

Warning: The full API key is displayed only once after generation. Copy it to a secure location immediately. If you lose it, you will need to generate a new one.

Revoking an API Key

If your API key is compromised or you need to rotate it:

  1. Click the Revoke Key button next to the current key preview.
  2. Confirm the action when prompted.
  3. The old key is immediately invalidated. Any widget installations using the old key will stop working.
  4. Generate a new key and update your website embed code.

Domain Security (Allowed Domains)

Control which websites are allowed to use your widget by specifying allowed domains.

Adding a Domain

  1. In the Allowed Domains section, enter a domain name (e.g., example.com or https://example.com).
  2. Click the + button or press Enter.
  3. The domain is normalized automatically -- www. prefixes and URL paths are stripped.

Removing a Domain

Click the X button next to any domain in the list to remove it.

Saving Domain Settings

Click Save Domains to apply the changes.

Warning: If no domains are configured, the widget will work on any website. For security, always add your production domains to restrict widget usage to your own sites.

Appearance Customization

Customize how the widget looks on your website:

Setting Description
Primary Color The main color used for the widget header, chat bubble button, and bot message backgrounds. Use the color picker or enter a hex code.
Position Choose whether the widget appears in the Bottom Right or Bottom Left corner of the page.
Welcome Message The greeting message displayed when a customer opens the chat (e.g., "Hello! How can I help you?").
Placeholder Text The placeholder text shown in the message input field (e.g., "Type your message...").

Saving Appearance Settings

Click Save Settings to apply your customization.

Previewing the Widget

Click the Preview button to see a live preview of how the widget will look with your current settings. The preview shows the chat bubble, conversation window, greeting message, and input field with your chosen colors and position.

Installation

To install the widget on your website:

  1. Make sure you have generated an API key (see above).
  2. Scroll to the Installation Code section.
  3. Click Copy Code to copy the embed snippet.
  4. Paste the code into your website's HTML, ideally just before the closing </body> tag.

The embed code looks like this:

<!-- DirectSale Widget -->
<script
  src="https://your-api-url/widget.js"
  data-ssa-key="YOUR_API_KEY"
  data-ssa-url="https://your-api-url"
  async>
</script>

Info: The async attribute ensures the widget script loads without blocking your page. The widget will appear automatically once the script loads.

Platform-Specific Instructions

WordPress: Paste the code in your theme's footer.php file or use a plugin like "Insert Headers and Footers."

Shopify: Go to Online Store > Themes > Edit Code, and paste the snippet in theme.liquid before </body>.

Wix: Use the Wix HTML embed feature (Custom Code) to add the snippet to your site.

Any HTML site: Paste the code before the closing </body> tag in your HTML files.

Warning: If you have not generated an API key, the embed code will contain a placeholder (YOUR_API_KEY). Make sure to generate a real key before deploying.

Bot Behavior

The widget uses your chatbot configuration from the Chat Studio section. To customize what the bot says, how it responds, and which AI model it uses, go to Dashboard > Chat Studio.

Troubleshooting

Issue Solution
Widget does not appear Verify the API key is valid and the script URL is correct. Check your browser's developer console for errors.
Widget appears but does not respond Ensure your subscription is active and you have not exceeded your message quota.
Widget blocked on your domain Check that your domain is in the Allowed Domains list, or that no domains are configured (allowing all).
Widget appears on unauthorized sites Add your domains to the Allowed Domains list to restrict usage.