Once your agent is trained, you can deploy it to your website or any of the messaging channels ChatSpark supports. Choose the channel your customers use most.
8 min read
Updated September 2026
Each AI agent is deployed to one channel. When creating an agent, select the AI Agent Type in the Settings tab to choose where it lives. The rest of this page covers the Website type. For all other channels, follow the dedicated setup guide below.
| Channel | Best For | Setup Guide |
|---|---|---|
| Website | Website visitors, lead capture | This page |
| Mobile-first markets, global reach | WhatsApp setup guide | |
| Facebook Messenger | Facebook Page inbox, social media presence | Facebook Messenger setup guide |
| Instagram DMs | E-commerce, visual brands | Instagram DMs setup guide |
| Telegram | Tech-savvy audiences, developer communities | Telegram setup guide |
| Slack | Internal teams, B2B support | Slack setup guide |
| Discord | Community servers, developer audiences | Discord setup guide |
To add ChatSpark to any website, copy your embed script and paste it into your site's HTML.
</body> tag on every pageThe script looks like this:
<script
src="https://chat.chatspark.io/loader.js"
data-chatbot-id="YOUR_AGENT_ID"
></script>Replace YOUR_AGENT_ID with the ID shown in your dashboard. Once the script is on the page, the chat widget appears automatically in the bottom-right corner.
By default the widget appears as a floating bubble in the bottom-right corner (Classic Bubble). You can also choose the Conversation Bar — a centered input bar at the bottom of the page with an animated prompt that invites visitors into a conversation.
The launcher style is set in your agent's Settings tab and automatically applied to every visitor. You can also override it per-embed using the data-launcher-style attribute:
<!-- Classic Bubble (default) -->
<script
src="https://chat.chatspark.io/loader.js"
data-chatbot-id="YOUR_AGENT_ID"
></script>
<!-- Conversation Bar -->
<script
src="https://chat.chatspark.io/loader.js"
data-chatbot-id="YOUR_AGENT_ID"
data-launcher-style="conversation_bar"
></script>bubble (default) and conversation_bar. When using the Conversation Bar, the widget is centered at the bottom of the page and the iframe only occupies the space the bar visually covers — it does not block page content underneath.The official ChatSpark plugin is the easiest way to add your agent to a WordPress site. It handles the embed automatically across all pages.
You can add the embed script to a Shopify store through the theme editor.
</body>Wix supports custom code through its site settings.
Squarespace lets you inject custom code through the website settings panel.
In Webflow, custom scripts are added through the project settings.
You can open the chat widget from any button, link, or element on your page. Add two attributes to any HTML element:
class="cs-trigger-agent" tells ChatSpark the element should open the widgetdata-trigger="Your message here" pre-fills the chat with specific text<button class="cs-trigger-agent" data-trigger="Talk to Sales">
Contact Sales
</button>
<a href="#" class="cs-trigger-agent" data-trigger="I need help with pricing">
Pricing Questions?
</a>