How to Embed the Support Genix Chatbot on Any Website

Deploy the AI chatbot on external websites — not just your WordPress site. Use embed tokens to control access, restrict domains, and customize which features are available.

Overview

The Support Genix chatbot can be embedded on any website using a lightweight script tag. The chatbot loads as an iframe and communicates securely with your WordPress site’s API. The chatbot bundle is only ~150KB, ensuring fast load times.

Step 1: Create an Embed Token

Embed tokens are secure keys that authorize external sites to use your chatbot.

1. Go to Support Genix > Settings > Chatbot (or the Chatbot Embed section).
2. Click Add New Token.
3. Fill in:

Field	Description
Title	A name for this token (e.g., “Main Website”, “Partner Site”)
Allowed Domains	Comma-separated list of domains where this chatbot is allowed
Primary Color	Custom brand color for the chatbot UI (hex code, e.g., #1890ff)
Status	Active or Inactive

1. Click Save.
2. A unique 64-character token is generated automatically.

Domain Restrictions

Control which websites can use the chatbot:

• Leave empty — The chatbot works on any domain (not recommended for production).
• Specify domains — Only the listed domains can use the chatbot.

Examples:

example.com, www.example.com, shop.example.com

Note: Enter domain names without http:// or https://. Both protocols are supported automatically.

Step 2: Configure Features

For each embed token, you can enable or disable specific chatbot features:

Feature	Description
Ticket Creation	Allow visitors to create support tickets from the chatbot
Voice Chat	Enable AI-powered voice conversations
Feedback Buttons	Show helpful/unhelpful feedback options after responses
Document Browsing	Allow searching and browsing knowledge base articles
Resources Tab	Show a documentation resources section

Document Restrictions

Control which knowledge base content is accessible:

Setting	Description
Restrict Docs Browsing	Enable to limit which docs are visible
Allowed Spaces	Only show articles from these knowledge base spaces
Allowed Categories	Only show articles from these categories

Leave spaces and categories empty (with Restrict Docs Browsing off) to show all published articles.

Step 3: Add the Embed Code

Copy the embed code from the token details and paste it into the external website.

Basic Embed

Add the chatbot script tag to your external website’s HTML, typically before the closing </body> tag:

<script
  src="https://yourwordpresssite.com/wp-content/plugins/support-genix/chatbot/dist/embed.js"
  data-token="YOUR_EMBED_TOKEN_HERE"
></script>

Replace:

• yourwordpresssite.com with your actual WordPress site domain.
• YOUR_EMBED_TOKEN_HERE with the token generated in Step 1.

Where to Add the Code

• Static HTML sites — Add to the HTML file directly.
• CMS platforms — Add to the site header/footer injection area.
• Shopify — Add to theme.liquid before </body>.
• Squarespace — Use Code Injection in site settings.
• React/Vue/Angular apps — Add to index.html or use a dynamic script loader.

Step 4: Test the Embed

1. Visit the external website where you added the code.
2. You should see a chat bubble in the bottom-right corner.
3. Click it to open the chatbot.
4. Test:

Managing Multiple Embed Tokens

You can create multiple tokens for different websites or use cases:

Token	Domain	Features	Use Case
Main Site	www.example.com	All features	Full chatbot on your marketing site
Docs Site	docs.example.com	Docs browsing only	KB search on documentation site
Partner Site	partner.com	Ticket creation, feedback	Limited chatbot for partner support

Each token operates independently — deactivating one doesn’t affect others.

Customization

Brand Color

Set a Primary Color per embed token to match the target website’s branding. This color applies to:

• Chat bubble button
• Links and interactive elements
• Header accents

If no color is specified, the chatbot uses your Support Genix default brand color.

Security

• Token validation — Every chatbot request includes the token, which is validated server-side.
• Domain checking — If allowed domains are specified, requests from unauthorized domains are rejected.
• Rate limiting — Chatbot conversations are rate-limited (max 500 per user) to prevent abuse.
• Guest tracking — Guest users are tracked via a hashed browser identifier (no personal data collected).

Troubleshooting

Chatbot Bubble Not Appearing

• Verify the script tag is correctly placed in the HTML.
• Check the browser console for JavaScript errors.
• Ensure the token status is Active.
• Ensure your WordPress site is accessible from the external site (no CORS issues).

“Unauthorized Domain” Error

• Verify the current domain is listed in the token’s Allowed Domains.
• Check for www vs non-www mismatches. Add both if needed.

Chatbot Not Responding

• Verify your AI service (OpenAI, Claude, or AI Proxy) is configured and has available credits.
• Check the debug log on your WordPress site for API errors.
• Ensure the chatbot is enabled in Support Genix settings.

Slow Loading

• The chatbot bundle is lightweight (~150KB). If loading is slow, check:

Related Docs

• Managing Chatbot Conversations
• Troubleshooting Common Issues