Website Deployment

After creating your agent, deploy it to your website so visitors can start chatting.

Booking toggle

If your org has booking enabled, turn on Enable booking in conversations (web chat) in the deployment dialog. This wires the chat widget to the booking + availability tools for the agent and ElevenLabs. If booking isn’t part of your plan, the toggle will be disabled.

Deployment Wizard

Click How to Deploy? on your agent to open the guided deployment wizard.

Step 1: Website Type

Tell us how you manage your website:

Website Builder

Wix, Squarespace, GoDaddy, WordPress.com, Shopify, Webflow, Weebly

Custom Website

React, Next.js, Vue, Angular, HTML/CSS, Django, Rails, PHP

Not Sure

We’ll recommend the simplest option

Step 2: Platform-Specific Instructions

Based on your selection, you’ll receive customized step-by-step instructions.

Website Builder Instructions

Open Settings

Go to your Wix dashboard → Settings → Custom Code

Add Code

Click Add Custom Code in the Body section

Paste Script

Paste the widget code provided in the deployment dialog

Configure

Name: “Kordless Chat”
Location: Body - End
Pages: All Pages

Publish

Save and publish your site

Option 1: Plugin (Recommended)

Install Plugin

Install “Insert Headers and Footers” or “WPCode” plugin

Add Script

Go to plugin settings → Add new code snippet

Configure

Paste widget code
Set location to Footer
Enable on all pages

Option 2: Theme Editor

Open Theme Editor

Go to Appearance → Theme Editor

Edit Footer

Open footer.php file

Add Code

Paste script before </body> tag

Open Theme Editor

Go to Online Store → Themes → Actions → Edit code

Find theme.liquid

Open theme.liquid in the Layout folder

Add Code

Paste the widget code just before </body>

Save

Click Save

Custom Website Instructions

Plain HTML
React
Next.js
Vue / Nuxt
Angular

Add this code before the closing </body> tag on every page:

<script>
  window.kordlessChatConfig = {
    title: 'AI Assistant',
    agent_id: 'YOUR_AGENT_ID',
    apiUrl: 'https://api.yourdomain.com',
    environment: 'prod'
  };
  (function() {
    var script = document.createElement('script');
    script.src = 'https://app.kordless.com/chat-widget.js';
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

Replace YOUR_AGENT_ID with your agent ID from the deployment dialog and set apiUrl to your API domain.

Create a component and add it to your app:

import { useEffect } from 'react';

function ChatWidget() {
  useEffect(() => {
    window.kordlessChatConfig = {
      title: 'AI Assistant',
      agent_id: 'YOUR_AGENT_ID',
      apiUrl: 'https://api.yourdomain.com',
      environment: 'prod'
    };
    const script = document.createElement('script');
    script.src = 'https://app.kordless.com/chat-widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  
  return null;
}

export default ChatWidget;

Then add <ChatWidget /> to your root layout or App component.

Add to your root layout (app/layout.tsx or pages/_app.tsx):

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          id="kordless-chat"
          strategy="lazyOnload"
          dangerouslySetInnerHTML={{
            __html: `
              window.kordlessChatConfig = {
                title: 'AI Assistant',
                agent_id: 'YOUR_AGENT_ID',
                apiUrl: 'https://api.yourdomain.com',
                environment: 'prod'
              };
              (function() {
                var script = document.createElement('script');
                script.src = 'https://app.kordless.com/chat-widget.js';
                script.async = true;
                document.head.appendChild(script);
              })();
            `,
          }}
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Vue 3:

<script setup>
import { onMounted, onUnmounted } from 'vue';

let script = null;

onMounted(() => {
  window.kordlessChatConfig = {
    title: 'AI Assistant',
    agent_id: 'YOUR_AGENT_ID',
    apiUrl: 'https://api.yourdomain.com',
    environment: 'prod'
  };
  script = document.createElement('script');
  script.src = 'https://app.kordless.com/chat-widget.js';
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

Nuxt: Add to nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: `
            window.kordlessChatConfig = {
              title: 'AI Assistant',
              agent_id: 'YOUR_AGENT_ID',
              apiUrl: 'https://api.yourdomain.com',
              environment: 'prod'
            };
            (function() {
              var script = document.createElement('script');
              script.src = 'https://app.kordless.com/chat-widget.js';
              script.async = true;
              document.head.appendChild(script);
            })();
          `
        }
      ]
    }
  }
});

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

<script>
  window.kordlessChatConfig = {
    title: 'AI Assistant',
    agent_id: 'YOUR_AGENT_ID',
    apiUrl: 'https://api.yourdomain.com',
    environment: 'prod'
  };
  (function() {
    var script = document.createElement('script');
    script.src = 'https://app.kordless.com/chat-widget.js';
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

Or dynamically in a service:

@Injectable({ providedIn: 'root' })
export class ChatWidgetService {
  loadWidget() {
    const script = document.createElement('script');
    script.src = 'https://chat.kordless.com/widget.js';
    script.async = true;
    script.setAttribute('data-agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(script);
  }
}

Deployment Options

Method	Best For	Description
Widget	Most websites	Floating chat button in corner of the page
Embed	Landing pages	Inline chat embedded directly in page content
Link	Simple sharing	Direct link to a hosted chat page

Widget deployment is recommended for most use cases. Embed and Link options are coming soon.

Verifying Your Deployment

After adding the code:

Clear Cache

Clear your browser cache or open an incognito/private window

Visit Your Site

Navigate to your website

Look for Widget

You should see a chat button in the bottom-right corner

Test Conversation

Click to open and send a test message

Check Dashboard

Return to Sales Chat → Chat History to see the conversation

Troubleshooting

Widget Not Appearing

Widget Appears But Doesn't Work

Widget on Wrong Pages

Multiple Widgets Appearing

Cause: Script added multiple timesFix:

Search your codebase for the widget script
Remove duplicates
Keep only one instance in your main layout/template

Widget Conflicts with Other Scripts

Advanced Configuration

By default, the widget appears in the bottom-right corner. Contact support if you need custom positioning.

Multiple Agents

If you have multiple agents for different pages:

<!-- Homepage - Sales agent -->
<script
  src="https://chat.kordless.com/widget.js"
  data-agent-id="SALES_AGENT_ID"
  async
></script>

<!-- Support page - Support agent -->
<script
  src="https://chat.kordless.com/widget.js"
  data-agent-id="SUPPORT_AGENT_ID"
  async
></script>

Only load one widget script per page. Use conditional logic to load the appropriate agent based on the page.

Getting Started

CRM

Sales Chat

Voice Agent (Phone)

Calendar & Bookings

Business Info

Kordless Page

Website

Forms

Integration

Website Deployment

Booking toggle

Deployment Wizard

Step 1: Website Type

Website Builder

Custom Website

Not Sure

Step 2: Platform-Specific Instructions

Website Builder Instructions

Custom Website Instructions

Deployment Options

Verifying Your Deployment

Troubleshooting

Advanced Configuration

Widget Position

Multiple Agents

Next Steps

View Conversations

Refine Your Agent

Getting Started

CRM

Sales Chat

Voice Agent (Phone)

Calendar & Bookings

Business Info

Kordless Page

Website

Forms

Integration

​Booking toggle

​Deployment Wizard

​Step 1: Website Type

Website Builder

Custom Website

Not Sure

​Step 2: Platform-Specific Instructions

​Website Builder Instructions

​Custom Website Instructions

​Deployment Options

​Verifying Your Deployment

​Troubleshooting

​Advanced Configuration

​Widget Position

​Multiple Agents

​Next Steps

View Conversations

Refine Your Agent

Booking toggle

Deployment Wizard

Step 1: Website Type

Step 2: Platform-Specific Instructions

Website Builder Instructions

Custom Website Instructions

Deployment Options

Verifying Your Deployment

Troubleshooting

Advanced Configuration

Widget Position

Multiple Agents

Next Steps