← Back to blog

    How to add a support chatbot to your website without writing code

    Adding a chatbot to a website sounds like a developer job. For most site builders it is a copy and paste, and the whole thing takes about three minutes. This is the walkthrough I send to customers who ask.

    What you're actually adding

    A chat widget is one line of code, a script tag, that tells your page to load the chat bubble. It looks like this:

    <script src="https://cs-vibe.com/widget/v1.js" data-site-id="your-site-id"></script>

    You don't write that line yourself. The dashboard generates it for your site once the bot is set up. Your only job is pasting it in the right place.

    Step 1: Build the bot first

    Before touching your website, go to the VibeCS dashboard and paste your site's address. It crawls your public pages and builds the bot from them. Ask it a few questions a customer would ask. If an answer is wrong, the fix is on your site, not in the bot: make that page clearer and run the crawl again.

    Step 2: Find your platform's footer code box

    Every major site builder has a place to paste code that runs on every page. The names differ:

    • WordPress: install the free WPCode plugin, then Code Snippets, Header & Footer, Footer box.
    • Shopify: Online Store, Themes, Edit code, then theme.liquid just above the closing body tag.
    • Webflow: Site settings, Custom code, Footer code.
    • Squarespace: Settings, Advanced, Code Injection, Footer (Business plan or higher).
    • Wix: Settings, Custom Code, Add Custom Code, placed at Body end (Premium plan with a domain).
    • Framer, Carrd, Weebly, HubSpot, GoDaddy and Google Tag Manager each have the same idea under a slightly different name. There are step-by-step guides for all of them on our integrations pages.

    Paste the snippet there, save, and publish.

    Step 3: Check it's live

    Open your site in a fresh tab. The bubble should sit bottom-right on every page. Ask it something. If you don't see it, the two usual causes are a cached page (do a hard refresh) or the code going into a per-page box instead of the site-wide one.

    VibeCS also notices the first time the widget loads on your domain and marks the install as live in your dashboard, so you don't have to guess.

    Things people worry about that aren't a problem

    • Speed: the script is small and loads after your page, so it doesn't hold up your content.
    • Design: the bubble picks up a brand color from your site during the crawl, and you can change it.
    • Phones: it works on mobile the same way it does on desktop.
    • Removing it: delete the line and it's gone. Nothing else on your site changes.

    If you'd rather not touch the site at all

    The dashboard has an 'email these steps' button that sends the exact instructions and your snippet to whoever manages your website. Most developers do it in a minute.

    The bot is $8 a month or $99 once. You can test it on your site before paying anything, and the snippet is only generated after you've seen it work.