How to Add a Chatbot to Your Website: WordPress, Shopify, and More

Adding a chatbot to your website requires one line of code. Copy. Paste. Done.

Average installation time: under 60 seconds.

Get Your Embed Code

In Kya:

1. Go to Settings → Installation
2. Copy your embed code

It looks like this:

<script src="https://widget.meetkya.com/chatbot.js?id=your-unique-id"></script>

Now install it on your platform.

WordPress Installation

Option A: Plugin Method (Recommended)

1. Install WPCode (free plugin)
2. Go to Code Snippets → Add Snippet
3. Choose Add Your Custom Code
4. Paste your embed code
5. Set location to Site Wide Footer
6. Activate and Save

This method survives theme updates.

Option B: Theme Editor

1. Go to Appearance → Theme File Editor
2. Select footer.php from sidebar
3. Find the </body> tag
4. Paste embed code right before it
5. Click Update File

Warning: Theme updates may overwrite this.

Shopify Installation

Via Theme Settings (Easiest)

1. Go to Online Store → Themes
2. Click Customize on current theme
3. Click Theme Settings (gear icon)
4. Find Custom Scripts or Additional Scripts
5. Paste embed code
6. Save

Via Theme Code

1. Go to Online Store → Themes
2. Click Actions → Edit Code
3. Find theme.liquid in Layout folder
4. Scroll to find </body>
5. Paste embed code right before it
6. Save

Wix Installation

1. Go to Wix Editor
2. Click Settings (gear icon)
3. Select Custom Code
4. Click Add Custom Code
5. Paste embed code
6. Name it "Chatbot"
7. Set placement to Body - End
8. Apply to All Pages
9. Publish

Squarespace Installation

1. Go to Settings → Advanced → Code Injection
2. Scroll to Footer section
3. Paste embed code
4. Save

Note: Requires Business plan or higher.

Webflow Installation

1. Open Project Settings
2. Go to Custom Code tab
3. Paste embed code in Footer Code section
4. Publish your site

Next.js / React Installation

Next.js

Add to your _app.js or layout component:

import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://widget.meetkya.com/chatbot.js?id=your-unique-id"
        strategy="afterInteractive"
      />
    </>
  )
}

React

Add to public/index.html before </body>:

<script src="https://widget.meetkya.com/chatbot.js?id=your-unique-id"></script>

Or load dynamically:

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://widget.meetkya.com/chatbot.js?id=your-unique-id';
  document.body.appendChild(script);
}, []);

Google Tag Manager Installation

1. Log into Google Tag Manager
2. Create New Tag
3. Tag type: Custom HTML
4. Paste embed code
5. Trigger: All Pages
6. Save and Publish

Advantage: Manage chatbot without touching website code.

Any Custom Website

Find </body> tag in your HTML and paste before it:

    <!-- Your page content -->

    <script src="https://widget.meetkya.com/chatbot.js?id=your-unique-id"></script>
</body>
</html>

For multi-page sites, add to every page or use a shared footer include.

Verify Installation

After adding code:

1. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
2. Refresh the page
3. Look for widget (bottom-right corner by default)
4. Send test message

If widget appears and responds—done.

Troubleshooting

Widget doesn't appear?

• Check browser console (F12 → Console) for errors
• Verify code placement (should be before </body>)
• Try incognito mode (bypasses cache)
• Check if script loads (F12 → Network → filter for "kya")

Widget appears but doesn't work?

• Verify chatbot ID is correct
• Check if chatbot is active in dashboard
• Look for JavaScript errors in console

Widget blocks other elements?

• Adjust position in Settings → Chat Widget → Position
• Check for z-index conflicts in CSS

Specific Page Installation

Only want chatbot on certain pages?

WordPress

Use WPCode with conditional logic, or add to specific page templates only.

Shopify

Edit specific template files (e.g., only product.liquid).

JavaScript Conditional

<script>
if (window.location.pathname.includes('/support')) {
  var script = document.createElement('script');
  script.src = 'https://widget.meetkya.com/chatbot.js?id=your-unique-id';
  document.body.appendChild(script);
}
</script>

Widget Control Methods

Kya's widget exposes JavaScript methods:

// Open the chat
window.Kya.open();

// Close the chat
window.Kya.close();

// Toggle open/closed
window.Kya.toggle();

Use for custom buttons:

<button onclick="window.Kya.open()">Chat with us</button>

Multiple Chatbots

Different bots for different pages:

<script>
var chatbotId = window.location.pathname.includes('/support')
  ? 'support-bot-id'
  : 'sales-bot-id';

var script = document.createElement('script');
script.src = 'https://widget.meetkya.com/chatbot.js?id=' + chatbotId;
document.body.appendChild(script);
</script>

Performance

Kya's widget:

• Under 20KB (gzipped)
• Loads asynchronously (doesn't block page)
• Cached by browsers
• No meaningful impact on page speed scores

Common Mistakes

1. Pasting in header instead of footer — Should be before </body>, not in <head>
2. Forgetting to publish — Theme changes need publishing
3. Cache issues — Always clear cache after changes
4. Wrong chatbot ID — Double-check ID matches your chatbot
5. Multiple installations — Remove old code before adding new

Getting Started

Start free with Kya — takes 60 seconds.

1. Create your chatbot (point at your website)
2. Grab embed code from Settings → Installation
3. Follow platform-specific instructions above
4. Refresh site and test

From signup to live chatbot: under 5 minutes.

One line of code.

That's all between your website and 24/7 AI support.

Copy. Paste. Done.