Skip to main content

Embedding Your Chatbot

You've built an amazing AI agent — now let's put it on your website so your customers, visitors, or team members can use it! CiniterFlow makes this incredibly easy with an embeddable chat widget.

How It Works​

CiniterFlow generates a small piece of code (called a "script tag") that you paste into your website's HTML. This creates a chat bubble in the corner of your page. When visitors click it, they can chat with your AI agent directly on your site.

Step 1: Get the Embed Code​

  1. Open the Chatflow or Agentflow you want to embed
  2. Click the "<> Embed" button (or the code icon) in the top bar
  3. You'll see a popup with the embed code

The code looks something like this:

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/ciniterflow-embed/dist/web.js';
  Chatbot.init({
    chatflowid: 'your-chatflow-id-here',
    apiHost: 'https://flow.ciniter.com',
  })
</script>

Step 2: Add It to Your Website​

Copy the embed code and paste it into your website's HTML, anywhere between the <body> and </body> tags. Here's a complete example:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>Click the chat bubble in the bottom right to talk to our AI assistant!</p>

  <!-- CiniterFlow Chat Widget -->
  <script type="module">
    import Chatbot from 'https://cdn.jsdelivr.net/npm/ciniterflow-embed/dist/web.js';
    Chatbot.init({
      chatflowid: 'your-chatflow-id-here',
      apiHost: 'https://flow.ciniter.com',
    })
  </script>
</body>
</html>

Step 3: Customize the Appearance​

You can make the chat widget match your brand by adding a theme configuration:

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/ciniterflow-embed/dist/web.js';
  Chatbot.init({
    chatflowid: 'your-chatflow-id-here',
    apiHost: 'https://flow.ciniter.com',
    theme: {
      button: {
        backgroundColor: '#3B81F6',
        size: 48,
        iconColor: 'white',
      },
      chatWindow: {
        showTitle: true,
        title: 'Customer Support',
        welcomeMessage: 'Hi there! 👋 How can I help you today?',
        backgroundColor: '#ffffff',
        fontSize: 16,
        botMessage: {
          backgroundColor: '#f7f8ff',
          textColor: '#303235',
        },
        userMessage: {
          backgroundColor: '#3B81F6',
          textColor: '#ffffff',
        },
        textInput: {
          placeholder: 'Type your question...',
          sendButtonColor: '#3B81F6',
        },
      },
    },
  })
</script>

Customization Options at a Glance​

SettingWhat It Changes
button.backgroundColorColor of the chat bubble button
button.sizeSize of the button (small, medium, large, or a number)
chatWindow.titleTitle shown at the top of the chat window
chatWindow.welcomeMessageFirst message the user sees
chatWindow.starterPromptsSuggested questions shown to the user
botMessage.backgroundColorBackground color of AI messages
userMessage.backgroundColorBackground color of user messages
textInput.placeholderPlaceholder text in the input field

Adding a Disclaimer​

If you need users to agree to terms before chatting:

disclaimer: {
  title: 'Disclaimer',
  message: 'By using this chatbot, you agree to our <a href="/terms">Terms of Service</a>',
  buttonText: 'Start Chatting',
  buttonColor: '#3B81F6',
}

Adding Starter Prompts​

Help users get started by suggesting questions:

chatWindow: {
  starterPrompts: [
    'What are your business hours?',
    'How do I return a product?',
    'Tell me about your pricing plans'
  ],
}

Fixing CORS Issues​

If you see an error about "CORS policy" when embedding on your website, make sure your domain is added to the allowed origins list. Go to Settings → Configuration → Security in your CiniterFlow dashboard and add your website's domain to the Allowed Domains list.

What's Next?​

Your chatbot is now live on your website! Next, let's learn how to connect your AI agent to other applications using the API.

👉 Using the API