Chapter 3
Channels
Channels are where your assistant meets customers: the chat window on your website, Zalo OA, Facebook Messenger. This chapter focuses on Web Chat, available on every plan: create a chatbot, tune its behaviour and look to your brand, attach it to an assistant and paste one snippet on your site.
Four videos, each under ninety seconds, in the order you will do it the first time. Zalo OA and Facebook get their own videos later.
4 videos · 4:51
One chatbot per website. This video creates a new chatbot and sets what visitors see first: bot name, status line, greeting bubble and auto-open.
Use it when: When you first bring the assistant to a website, or need a separate chatbot for another landing or sales page.
Steps
- 1Open Channels in the sidebar. Three cards: Web Chat, API (coming soon) and Social Media. Click Web Chat.
- 2The Web Chatbot list shows how many chatbots you use against your plan limit. Click Create Chatbot, give it a name and a short description.
- 3You land on the configuration page. Behavior tab: change the bot name, online status and input placeholder. The live preview on the right updates as you type.
- 4In the Launcher card, turn on the greeting bubble and write the invitation. Auto-open card: turn it on so the chat window opens a few seconds after the visitor arrives.
- 5Click Save changes. Unsaved edits stay on this device thanks to the auto-saved draft.
Chatbot name: Tư vấn StepX
Description: Support chat on the stepx.vn home page
Bot name: Minh Anh — Status: Replies within 1 minute
Greeting bubble: Chào bạn, mình giúp gì được?
Good to know
- Chatbot names accept letters, digits, spaces, hyphens and underscores; Vietnamese accents are fine.
- Greeting bubble and auto-open are separate switches: the bubble only invites, auto-open actually opens the window.
Outcome: A web chatbot with the right name, status, greeting bubble and auto-open, ready for styling.
The Appearance tab ships eight colour themes, or edit every colour to match your brand. This video switches theme, tweaks the primary colour, text size and radius, and shows where the Powered by StepX line lives.
Use it when: After creating the chatbot and before embedding it, so the chat window matches your site.
Steps
- 1On the chatbot page open the Appearance tab. Theme card: pick a preset in the Default theme box, for example Ocean. The chat window changes instantly.
- 2Colours card: click a swatch to edit each colour: background, text, chat bubbles, buttons. Editing any colour switches the theme to Custom.
- 3Typography & layout card: font, base text size, corner radius and shadow.
- 4Branding card: the Powered by StepX badge switch. It can be removed on the Enterprise plan. The Advanced card opens a JSON box to paste a whole theme file.
- 5Click Save changes. The preview on the right is exactly what visitors will see on your website.
Good to know
- Pick a preset first, then adjust a few colours; it is faster than building from scratch.
- The theme JSON under Advanced lets you copy a look between chatbots or organizations.
Outcome: A chat window in your brand colours and type, and you know how to remove Powered by and reuse a theme JSON.
A chatbot only answers once it is attached to an assistant and the website is on the allowed-domain list. This video links the assistant, adds the domain, pastes the embed code into the site's HTML file and runs a test chat.
Use it when: When the chatbot is styled and you want it live on the website.
Steps
- 1Open Assistants, pick the assistant that will answer, choose Channels. The Channels used line shows how many more you can attach on your plan.
- 2Click Link channel and pick the chatbot you created. The assistant uses its persona and knowledge on this channel.
- 3Under Configuration, Allowed domains: type the website's domain and click Add. Click Save and publish, then confirm. The link and the domain only take effect after this step.
- 4Scroll to Embed code and click Copy code. The snippet is one script tag that loads the widget and one init call with the channel and assistant IDs.
- 5Open the website's HTML file in your code editor (the video uses VS Code), find the closing body tag at the end of the file, paste the code right above it and save.
- 6Reload the website: the chat button and greeting bubble appear bottom right. Ask a question; the assistant answers from the knowledge you loaded and the conversation lands in Sessions.
<script src="https://widget.stepx.vn/chatbot-widget.iife.js"></script>
<script>window.initChatbotWidget({ channelId: "…", agentId: "…", mode: "live" });</script>
Paste right before </body>, once for every page sharing the layout.
Good to know
- Only listed domains can embed the widget; enter the real domain, without https or a path.
- Domains and channels per assistant depend on your plan; when you run out, unlink an old channel or upgrade.
- For multi-page sites put the snippet in the shared layout or footer so you paste it once.
Outcome: Your website has a working chat window, the assistant answers from its knowledge, and conversations land in Sessions.
With several websites the Web Chatbot table is where you manage them: which chatbot is attached to which assistant, pin the ones you use, clone for a new site and delete safely.
Use it when: When you open a second or third website, or clean up test chatbots.
Steps
- 1The Web Chatbot table has Name, Description, Assistants in use and Status. The three-dot menu at the end of a row: Pin moves it to the top.
- 2Clone: creates a copy with the same look, behaviour and domains; the default name adds (copy). Use it for another website in the same style.
- 3Edit: rename and change the description without touching the configuration.
- 4Delete: the confirmation lists the three things you lose: configuration, conversation history and every embed pointing at the chatbot. Type DELETE to confirm.
Good to know
- A clone is not attached to any assistant yet; open Assistants, Channels, and link it like a new chatbot.
- Before deleting, check the Assistants in use column so you do not take a live website offline.
Outcome: You can manage several chatbots: pin, clone for a new website, edit details and delete exactly the one you mean.