Widget Integration

Integrate your AskIA bot into any website with a single line of code.

Overview

The AskIA widget is a lightweight JavaScript component that adds a chat interface to your website. It's easy to install, fully customizable, and works on any website.

Basic Installation

The simplest way to add AskIA to your website is with a single script tag:

index.html

<script src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"></script>

Important: Replace YOUR_BOT_ID with your actual bot ID. You can find this in your bot's Snippet page.

Where to Place the Code

Add the script tag just before the closing </body> tag of your HTML:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->
  
  <!-- AskIA Widget -->
  <script src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"></script>
</body>
</html>

Domain Whitelist Configuration

For security, you must configure which domains can embed your bot widget.

Setting Up Allowed Domains

Go to your bot's Settings page
Scroll to the "Allowed Domains" section
Enter your domain (e.g., example.com)
Click "Add"
Click "Save Allowed Domains"

Note: askiabot.com is automatically included for preview and testing. You don't need to add it manually.

Domain Rules

Subdomains: If you whitelist example.com, all subdomains like app.example.com are automatically allowed
WWW Variants: www.example.com and example.com are treated as the same
Case Insensitive: Domains are automatically normalized to lowercase
No Protocol: Enter domains without http:// or https://

Security: Without allowed domains configured, your bot cannot be activated. Always add your production domain before going live.

Framework-Specific Integration

React / Next.js

For React applications, use Next.js Script component:

app/layout.tsx

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"
        strategy="lazyOnload"
      />
    </>
  )
}

Vue.js

App.vue

<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = 'askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID'
    script.async = true
    document.body.appendChild(script)
  }
}
</script>

WordPress

Add to your theme's functions.php:

functions.php

function add_askia_widget() {
    $bot_id = 'YOUR_BOT_ID';
    $script_url = 'askiabot.com/api/widget/embed.js?botId=' . $bot_id;
    ?>
    <script src="<?php echo esc_url($script_url); ?>" async></script>
    <?php
}
add_action('wp_footer', 'add_askia_widget');

Widget Behavior

Default Appearance

Chat bubble appears in bottom-right corner
Opens as a chat window when clicked
Automatically adapts to light/dark theme
Fully responsive on mobile devices

Mobile Experience

On mobile devices, the chat opens in full-screen mode for the best user experience.

Testing Your Integration

Add the widget code to your website
Ensure your domain is whitelisted in bot settings
Activate your bot
Reload your website
Look for the chat bubble in the corner
Click to open and test the chat

Preview Mode

You can test your bot before adding your domain using preview mode:

Activate your bot (even without user domains)
Visit the preview page: /widget/preview?botId=YOUR_BOT_ID
Test your bot's functionality
Add your domain when ready for production

Troubleshooting

Widget Not Appearing

Check that your bot is activated
Verify your domain is whitelisted
Check browser console for errors
Ensure the script tag is before </body>

Domain Not Allowed

Verify domain is added in bot settings
Check domain format (no protocol, lowercase)
Ensure domain is saved
Wait a few seconds for changes to propagate

Next Steps

Code Examples

See integration examples for React, Vue, and more

REST API

Build custom integrations with our API