Installation – Ask My Docs

Widget Installation

Installing the Ask My Docs widget on your website is quick and straightforward. Follow these steps to get your chat widget up and running in minutes.

Step 1: Get Your Widget Key

After signing up, navigate to your project settings in the dashboard to find your unique widget key. This key identifies your project and ensures questions are answered using your documents.

[Image: Dashboard screenshot showing where to find the widget key]

Step 2: Add the Script Tag

Add the following script tag to your website, typically in the <head> section or just before the closing </body> tag:

<script 
    src="https://askmydocs.co.uk/widget.js" 
    data-widget-key="YOUR_WIDGET_KEY"
    data-api-url="https://api.askmydocs.co.uk">
</script>

Step 3: Replace Placeholder Values

YOUR_WIDGET_KEY: Replace with your actual widget key from the dashboard
data-api-url: The API URL (https://api.askmydocs.co.uk for production)

[Image: Annotated code example showing widget key and API URL]

Example: Complete HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>Your content here...</p>
    
    <!-- Ask My Docs Widget -->
    <script 
        src="https://askmydocs.co.uk/widget.js" 
        data-widget-key="abc123xyz"
        data-api-url="https://api.askmydocs.co.uk">
    </script>
</body>
</html>

Alternative: Global Configuration

You can also set the API URL globally before loading the widget:

<script>
    window.ASK_MY_DOCS_API_URL = 'https://api.askmydocs.co.uk';
</script>
<script 
    src="https://askmydocs.co.uk/widget.js" 
    data-widget-key="YOUR_WIDGET_KEY">
</script>

Verification

After installation, the widget should appear in the bottom-right corner of your website. Click on it to test the chat functionality.

[Image: Screenshot showing widget in bottom-right corner of a webpage]

Platform-Specific Instructions

WordPress

For WordPress sites, you can add the script tag using:

Theme Editor: Add to your theme’s header.php or footer.php
Plugin: Use a plugin like “Insert Headers and Footers” to add custom scripts
WordPress Plugin: Install our official WordPress plugin for easier integration

Static HTML Sites

Simply add the script tag to your HTML files as shown in the examples above.

React/Next.js

Add the script tag in your _document.js or _app.js file, or use the next/script component:

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://askmydocs.co.uk/widget.js"
        data-widget-key="YOUR_WIDGET_KEY"
        data-api-url="https://api.askmydocs.co.uk"
      />
    </>
  )
}