Set Up the Website Channel
Learn how to add BotSkyrik to your website as a floating chat widget or full-page experience, install the website code, preview your chatbot, and enable real-time Voice AI for website visitors.
Set Up the Website Channel
The Website Channel lets you bring your BotSkyrik AI Agent directly onto your own website. You can use it as a floating chat widget that stays available while visitors browse your site, or embed the complete chat experience inside a dedicated page or section. Once the installation code has been added, the chatbot itself continues to be managed from BotSkyrik, so changes to its appearance, instructions, knowledge, and other AI settings normally do not require you to reinstall the code.
Open Channels → Website to begin.
Choose How BotSkyrik Appears
The first step is deciding how you want visitors to access the chatbot. BotSkyrik currently provides two website experiences: Floating Chat Widget and Full-page Chat.
The Floating Chat Widget is the recommended option for most websites. It places a launcher in the corner of the site, allowing visitors to open the chatbot whenever they need help without leaving the page they are currently viewing. The widget's design, position, branding, launcher style, and other appearance settings come from your AI Agent configuration, so the installed widget stays synchronized with the experience you manage inside BotSkyrik.
The Full-page Chat option embeds the chatbot directly inside a page or page section. Instead of opening from a floating launcher, the conversation becomes part of the page itself. This works well when the AI experience is meant to be a central part of a support page, consultation page, customer portal, or another dedicated area of the website.
You can switch between the two options in the Website Channel workspace and use the Live preview on the right to see how the selected experience will appear before installing it.
Choose Your Website Platform
After choosing the display style, select the platform where your website is built. BotSkyrik currently provides installation guidance for WordPress, Shopify, Webflow, Custom HTML, and other website setups.
The actual BotSkyrik installation code remains essentially the same; selecting a platform mainly changes the guidance about where that code should be placed.
For a WordPress floating widget, for example, copy the BotSkyrik code and add it to a site-wide footer area, a header/footer code plugin, or a tag manager so it loads on every page. For Full-page Chat, add a Custom HTML block to the page where you want the chat experience to appear and paste the supplied code there.
On Shopify, a floating widget can normally be installed in the theme layout before the closing </body> tag, while Full-page Chat can be placed inside an appropriate Custom Liquid section or page block. On Webflow, the floating widget can be added through the site's Custom Code footer, while the full-page version can be inserted with an Embed element.
Custom websites follow the same principle: use the floating installation code before the closing </body> tag wherever the launcher should load, or place the Full-page Chat code directly inside the page section where the conversation should appear.
These are only the basic installation directions. For platform-specific walkthroughs and troubleshooting, open the Help & Resources area at the bottom of the Website Channel page rather than relying on this article for every website-builder variation.
Copy and Install the Code
Once the display mode and website platform are selected, BotSkyrik generates the installation code for your workspace. Select Copy Code, paste it into the appropriate location on your website, save or publish the website changes, and then visit the site normally.
The code contains your workspace identifier, so you should use the code generated from your own Website Channel rather than copying a snippet from another workspace or documentation example.
You normally install the BotSkyrik code only once. The chatbot's content and behavior are controlled from the platform afterward. For example, if you change the welcome message, instructions, brand color, avatar, launcher appearance, AI model, or Knowledge Base, those changes are managed inside BotSkyrik rather than by repeatedly editing the website code.
The Website Channel can also detect recent widget activity. Once BotSkyrik has received activity from the installed widget, the channel can show the website as Installed and display the detected domain. If installation has not yet been confirmed, the status remains Not confirmed until the widget is successfully loaded and detected.
Configure the Website Chatbot
The Website Channel preview uses your current BotSkyrik chatbot configuration, so appearance changes made in AI Agent Studio are reflected in the website experience without requiring a new installation snippet.
Add Real-Time Voice AI to Your Website
The Website Channel can provide more than text chat. Visitors can also speak directly with a real-time Voice AI Agent from the website chatbot.
Voice AI is configured separately because the real-time voice agent has its own model, voice, instructions, knowledge access, actions, and session behavior. Start by opening Voice AI, create or configure a Voice Agent, test it, and make sure the agent you want to use is Active.
After the Voice Agent is ready, open AI Agent Studio → Advanced → Live Voice Agent. Turn on Live Voice Agent, choose the active Voice Agent that should handle website calls, and save the configuration.
BotSkyrik can then expose a dedicated Talk to AI experience inside the website chatbot. When a visitor starts a voice conversation, the website connects them to the configured real-time Voice Agent rather than treating the interaction as an ordinary text message.
The Live Voice settings also let you control whether visitor information and conversation context are passed into the Voice Agent and whether Text Assist is available during the session. Text Assist can be useful when a visitor needs to provide information such as an email address or phone number more accurately while continuing the voice conversation.
Live Voice is separate from ordinary Voice Replies. Voice Replies turn an incoming voice message into an AI response, while the Live Voice Agent creates a real-time two-way voice conversation.
Preview Before Going Live
The Website Channel includes a live preview so you can check the experience before placing it on a production website. When Floating Chat Widget is selected, the preview shows how the launcher sits on a normal webpage and lets you open the chatbot. When Full-page Chat is selected, the entire chat interface is displayed inside the preview area.
Use the preview to confirm the general experience, but make final appearance changes from AI Agent Studio because that is the source of truth for the website chatbot's branding and behavior.
Once the code is installed and detected, your Website Channel is ready. Further updates to the AI Agent can be made from BotSkyrik without repeatedly changing the website installation code.
