Most guides on how to add AI chatbot to WordPress send you off to install something from the plugin directory. Klugon doesn't work that way. There's no Klugon plugin to install and nothing to keep updated inside WordPress. You copy one script tag from your Klugon dashboard and paste it into your site, and the chat button appears on every page that includes it.
That makes the job small, but WordPress has a few rules about who may paste scripts and where they survive theme updates. This page goes through the places that work, the permission you need, how to check it worked and what the chat does and doesn't do once it's live.
What you're adding to your site
Klugon is an AI receptionist for small businesses. On your website, it appears as a chat button in a corner of the page. Visitors click it, ask questions and get answers drawn from the information you've given Klugon: your services, prices, opening hours, policies and knowledge base. The assistant can also book appointments and take contact details for your team. The AI chatbot for websites page covers what it can do in more detail.
The snippet itself
The snippet is a single script tag. It loads a small file called widget.js from Klugon and carries your settings as attributes:
- data-agent-id: your business's ID, which tells the chat whose assistant to use. Without it, nothing appears.
- data-color: your brand colour.
- data-position: bottom-right, bottom-left, top-right or top-left.
- data-welcome: the first message visitors see.
- data-label: an optional label on the chat button.
It also has the async attribute, so the browser fetches it without pausing the rest of your page. The dashboard adds a short comment, "Klugon AI Widget", above the tag so you can find it again later.
You never need to write or edit this by hand. Change the settings in Klugon and copy the snippet again.
The iframe option
The dashboard also offers an iframe version. Instead of a floating button, it places a fixed box, 400 by 600 pixels, that shows your Klugon public page with its chat. Use it if you want the chat to sit inside a page, for example on a Contact page, rather than float over the whole site. The public page also offers voice chat in the browser, and the iframe allows the microphone for that.
Most sites want the floating button, so the rest of this page focuses on the script tag.
Before you start
The Klugon plan you need
The website chat runs on the AI chatbot product, which starts on the Starter tier. If your plan isn't active, the snippet loads but the chat can't start new conversations. On Business and Scale tiers of any Klugon product, the small "Powered by Klugon" line at the bottom of the chat is removed. See the pricing page for current prices.
The WordPress permission you need
WordPress only lets certain users save script tags. The capability is called unfiltered_html. According to WordPress's documentation on roles and capabilities, on a single site it belongs to Administrators and Editors, and on a Multisite network only Super Admins have it.
If you paste the snippet without that capability, WordPress quietly removes the script when you save. The Custom HTML block documentation says the same: script and iframe tags are stripped for users who lack it. If the chat doesn't appear, this is the first thing to check.
WordPress.com is different
Everything on this page is about self-hosted WordPress, the software from wordpress.org running on your own hosting. Sites on WordPress.com have extra limits. WordPress.com's support page on adding code explains that script tags need a plan that allows plugins, with hosting features activated. On lower plans, the snippet will be removed.
How to add AI chatbot to WordPress, step by step
Step 1: set up and copy the snippet in Klugon
- In the Klugon dashboard, open Widget and QR code.
- In the Customise card, set your brand colour, choose the position, write a welcome message and, if you want, a button label.
- Click Save changes.
- In the Embed code card, make sure the Script tag tab is selected and click Copy.
The dashboard's advice is to paste the snippet just before the closing body tag on any page. On WordPress, the footer is the practical place to do that, because it appears at the bottom of every page.
Step 2: choose where to paste it
Which route you take depends on the kind of theme your site uses. If you're not sure, look in the Appearance menu: if you see Editor, your theme is a block theme; if you see Customise and Widgets, it's a classic theme.
Block themes: paste it into the footer template part
Block themes, such as the recent default WordPress themes, are edited in the Site Editor. WordPress's guide to the Site Editor explains that changes to a template part like the footer apply across the whole site, which is what you want here.
- Go to Appearance, then Editor.
- Open Patterns, then Template Parts, and choose your Footer.
- Add a Custom HTML block at the end of the footer.
- Paste the snippet. In recent versions of WordPress, the Custom HTML block has separate panels for HTML, CSS and JavaScript; paste the whole snippet, including the script tag, into the HTML panel.
- Save.
Visit your site in a private browser window and the chat button should appear in the corner you chose.
If your site uses more than one footer, for example a different one on landing pages, repeat this for each footer you want the chat on.
Classic themes: use a footer widget area
Many classic themes have a widget area in the footer. WordPress's guide to managing widgets covers the screen.
- Go to Appearance, then Widgets.
- Find a footer widget area that shows on every page.
- Add a Custom HTML block and paste the snippet.
- Click Update.
The block itself shows nothing on the page, because the script places the chat button in the corner rather than in the widget area. If your theme has no footer widget area, or hides widgets on some page templates, use the child theme route below.
Child themes: add it to the footer file
If you or your developer are comfortable editing theme files, you can paste the snippet directly into the footer file, just before the closing body tag. Do this in a child theme, not the theme itself. WordPress's handbook on child themes explains why: edits to a parent theme are lost when that theme updates.
This is the route that most closely matches the dashboard's instruction, because the script sits exactly before the closing body tag on every page. It's also the easiest to break, so keep a copy of the file before you change it.
One page only: the block editor
Sometimes you only want the chat on a few pages, such as Contact or Book now.
- Open the page in the block editor.
- Add a Custom HTML block anywhere on the page.
- Paste the snippet and update the page.
The chat button appears on that page only. If you later want it everywhere, move the snippet to the footer and remove it from individual pages, so it isn't loaded twice.
Checking it worked
Look in a private window
Open your site in a private or incognito window, so you're not seeing a cached copy while logged in. The chat button should be in the corner you chose, in your brand colour.
Send a real question
Click the button. The header shows your business name and "Online · Replies instantly", with quick replies for Services, Book and Hours. Ask something you know the answer to, such as your opening hours, and check that the reply matches what you've set in Klugon.
Check on a phone
On screens 480 pixels wide or narrower, the chat window stretches to almost the full width of the screen. Check that it doesn't cover anything visitors need, such as a sticky booking button. If it does, move the chat to a different corner in Klugon and copy the snippet again.
If nothing appears
- The script was stripped. Edit the block again. If the script tag has gone, your user doesn't have unfiltered_html. Ask an Administrator to paste it.
- A caching tool is serving an old page. Clear your site's cache and any CDN cache, then reload.
- An optimisation tool changed the script. Tools that combine or delay JavaScript can stop the chat loading. Exclude widget.js from those settings.
- The snippet was changed. If data-agent-id is missing or edited, the chat won't load. Copy a fresh snippet from Klugon.
- The plan isn't active. Check your billing page in Klugon.
Getting the most from the chat on WordPress
Pasting the snippet is the quick part. A little preparation in Klugon makes the difference between a chat that helps and one that says "I'm not sure" too often.
Copy your key pages into the knowledge base
The assistant can't read your WordPress pages, so anything visitors ask about needs to be in Klugon as well. Start with the pages people visit most: services and prices, FAQs, delivery or cancellation policies, and how to find you. Paste the text into the knowledge base, or import a page by its web address. Klugon reads an imported page once and doesn't check it again, so add it again whenever you change it. Then check the answers in a test chat.
Write a welcome message for your visitors
The welcome message is the first thing people read. "Hi, I can answer questions about our treatments and book you in" tells visitors what the chat is for. A generic greeting doesn't. Keep it to one or two short sentences.
Pick a corner that's free
Cookie banners, back-to-top arrows and sticky booking bars often sit in the bottom corners of WordPress themes. Choose the corner the chat button won't fight with, and check it on a phone as well as a laptop.
Mention the chat in your privacy notice
Conversations in the chat are stored in your Klugon account, along with any contact details visitors share. Say so in your site's privacy notice. The floating chat keeps the conversation in the page's memory rather than in cookies or browser storage, but you should still check your own consent setup with whoever manages your site's compliance.
What the chat does once it's live
Answers from what you've told Klugon
The assistant uses your business profile, services, products and knowledge base. It doesn't look at the WordPress page the visitor is on, or your posts and menus. If a visitor asks about something that's only written on your site, add it to Klugon's knowledge base too, or the assistant won't know it.
Books and takes details
If booking is set up, the assistant can offer free times and book an appointment while the visitor is still on the page. The AI appointment booking page covers how that works. It can also save a lead with the visitor's contact details for your team to follow up.
Shows up in your dashboard
Every chat appears in Klugon's Conversations page, marked as coming from the website widget. Leads and bookings appear in their own pages, and on qualifying plans you can have them posted to Slack as they arrive.
What this doesn't do
- It isn't a WordPress plugin. Nothing is installed, and Klugon doesn't appear in your plugins list or settings.
- No access to WordPress content. The assistant doesn't read your posts, pages, users or forms. It answers only from what you add to Klugon.
- No WooCommerce product or order sync. Products are entered in Klugon by hand, and the chat can't see carts or orders on your site.
- No memory across pages. Each chat lives in the page it started on. If the visitor reloads or moves to another page, a new conversation starts.
- Text only in the floating chat. The script-tag chat is typed. Browser voice is on your public page and in the iframe version.
- No change to WordPress logins or comments. The chat is separate from your site's accounts and comment forms.
Frequently asked questions
Is there a Klugon plugin for WordPress?
No. You add Klugon by pasting one script tag into your site. Nothing is installed in WordPress.
Where is the best place to paste the snippet?
In the footer, so it loads on every page. On block themes, use a Custom HTML block in the Footer template part. On classic themes, use a footer widget area or a child theme's footer file.
Why did WordPress remove my script tag?
Your user role doesn't have the unfiltered_html capability. On single sites, Administrators and Editors have it. On Multisite networks, only Super Admins do.
Does it work on WordPress.com?
Only on plans that allow plugins, with hosting features activated. Lower WordPress.com plans strip script tags.
Will it slow my site down?
The script loads with the async attribute, so the browser doesn't wait for it before showing your page. As with any extra script, test your key pages after adding it.
Can the chat read my WooCommerce products?
No. Add your products to Klugon's catalogue so the assistant can talk about them. It can't see your WordPress store, carts or orders.
Does the conversation follow visitors from page to page?
No. A page reload or a move to another page starts a new conversation. Earlier chats are still saved in your dashboard.
How do I change the chat's colour or welcome message?
Your settings travel inside the snippet as attributes. Change them on the Widget and QR code page in Klugon, save, copy the new snippet and replace the old one in WordPress. Leaving the old snippet in place keeps the old settings.
Can I use the iframe instead of the floating button?
Yes. Copy the Iframe tab's code from Klugon and paste it into a Custom HTML block on the page where you want the chat box. It shows your public page in a fixed 400 by 600 box.
Do I need to update anything when WordPress updates?
No, unless you pasted the snippet into a parent theme file. Theme updates overwrite those files, which is why a child theme or the footer template part is safer.
Adding Klugon to WordPress is a copy and paste job once you know where the snippet belongs and who's allowed to save it. If you're comparing options first, our page on Tidio alternatives sets Klugon against a common WordPress choice, and the integrations page lists the other places Klugon connects, including Shopify.