Ask0 logoAsk0
Integrations

Integrations

Integration guides for adding Ask0 to your website, docs, or app. Support for all major frameworks, CMSs, and platforms.

Ask0 can be integrated into virtually any website, documentation platform, or application. The core integration method is our JavaScript snippet, which works everywhere JavaScript can run.

Quick Integration

The fastest way to add Ask0 to any site:

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="YOUR_PROJECT_ID"
></script>

That's it! The chat widget will appear on your site immediately.

Integration Categories

Documentation Platforms

Fumadocs, Docusaurus, GitBook, MkDocs, and more

Marketing Sites

WordPress, Webflow, Squarespace, and static sites

Web Applications

React, Vue, Angular, and other frameworks

Community Platforms

Discord, Slack, GitHub (coming soon)

Documentation Platforms

Fumadocs

// In your root layout
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://assets.ask0.ai/scripts/ask.js"
          strategy="afterInteractive"
          data-project-id="YOUR_PROJECT_ID"
        />
      </body>
    </html>
  );
}

Docusaurus

// In docusaurus.config.js
module.exports = {
  scripts: [
    {
      src: 'https://assets.ask0.ai/scripts/ask.js',
      async: true,
      'data-project-id': 'YOUR_PROJECT_ID',
    },
  ],
};

GitBook

Add via custom HTML in settings:

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="YOUR_PROJECT_ID"
></script>

MkDocs

extra_javascript:
  - https://assets.ask0.ai/scripts/ask.js

extra:
  ask0_project_id: YOUR_PROJECT_ID

→ See full MkDocs integration guide

Sphinx

Add to your Sphinx conf.py:

html_js_files = [
    ('https://assets.ask0.ai/scripts/ask.js', {
        'async': 'async',
        'data-project-id': 'YOUR_PROJECT_ID',
    }),
]

→ See full Sphinx integration guide

Hugo

Add to your Hugo layout:

<!-- layouts/partials/ask0.html -->
<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="{{ .Site.Params.ask0.projectId }}"
  async
></script>

→ See full Hugo integration guide

ReadTheDocs

Add to your theme's layout.html:

{% block footer %}
  {{ super() }}
  <script
    src="https://assets.ask0.ai/scripts/ask.js"
    data-project-id="YOUR_PROJECT_ID"
  ></script>
{% endblock %}

Marketing Sites

WordPress

Add via plugin or theme:

Method 1: Plugin

// In your custom plugin or functions.php
function add_ask0_script() {
  ?>
  <script
    src="https://assets.ask0.ai/scripts/ask.js"
    data-project-id="YOUR_PROJECT_ID"
  ></script>
  <?php
}
add_action('wp_footer', 'add_ask0_script');

Method 2: Theme Header Add to header.php or use a plugin like "Insert Headers and Footers"

Webflow

  1. Go to Project Settings → Custom Code
  2. Add to "Before </body> tag":
<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="YOUR_PROJECT_ID"
></script>

Squarespace

  1. Settings → Advanced → Code Injection
  2. Add to Footer:
<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="YOUR_PROJECT_ID"
></script>

Wix

  1. Go to Settings → Custom Code
  2. Add new custom code:
    • Name: Ask0 Chat
    • Add to: Body - End
    • Code: The script tag above

Static HTML Sites

Add before closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Your Site</title>
</head>
<body>
  <!-- Your content -->

  <!-- Ask0 Integration -->
  <script
    src="https://assets.ask0.ai/scripts/ask.js"
    data-project-id="YOUR_PROJECT_ID"
  ></script>
</body>
</html>

Web Applications

React / Next.js

Next.js App Router:

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://assets.ask0.ai/scripts/ask.js"
          strategy="afterInteractive"
          data-project-id="YOUR_PROJECT_ID"
        />
      </body>
    </html>
  );
}

React SPA:

// In App.jsx or index.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://assets.ask0.ai/scripts/ask.js';
    script.async = true;
    script.dataset.projectId = 'YOUR_PROJECT_ID';
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>Your App</div>;
}

Vue.js

Vue 3:

<!-- In App.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue';

let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://assets.ask0.ai/scripts/ask.js';
  script.async = true;
  script.dataset.projectId = 'YOUR_PROJECT_ID';
  document.body.appendChild(script);
});

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

Nuxt.js:

// nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://assets.ask0.ai/scripts/ask.js',
        async: true,
        'data-project-id': 'YOUR_PROJECT_ID',
      }
    ]
  }
}

Angular

// In app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const script = document.createElement('script');
    script.src = 'https://assets.ask0.ai/scripts/ask.js';
    script.async = true;
    script.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    document.body.appendChild(script);
  }
}

Svelte / SvelteKit

SvelteKit:

<!-- In app.html -->
<!DOCTYPE html>
<html>
  <head>
    %sveltekit.head%
  </head>
  <body>
    %sveltekit.body%
    <script
      src="https://assets.ask0.ai/scripts/ask.js"
      data-project-id="YOUR_PROJECT_ID"
    ></script>
  </body>
</html>

Remix

Add to your Remix root layout:

// app/root.tsx
export default function App() {
  return (
    <html lang="en">
      <body>
        <Outlet />
        <script
          src="https://assets.ask0.ai/scripts/ask.js"
          data-project-id={process.env.ASK0_PROJECT_ID}
          async
        />
      </body>
    </html>
  );
}

→ See full Remix integration guide

Gatsby

Add to your Gatsby browser APIs:

// gatsby-browser.js
export const onClientEntry = () => {
  const script = document.createElement('script');
  script.src = 'https://assets.ask0.ai/scripts/ask.js';
  script.dataset.projectId = process.env.GATSBY_ASK0_PROJECT_ID;
  script.async = true;
  document.body.appendChild(script);
};

→ See full Gatsby integration guide

Configuration Options

Customize the widget behavior with data attributes:

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="YOUR_PROJECT_ID"
  data-position="bottom-right"
  data-theme="dark"
  data-primary-color="#0066cc"
  data-greeting="How can I help you today?"
  data-placeholder="Type your question..."
  data-button-text="Ask AI"
  data-auto-open="false"
  data-hide-branding="false"
></script>

All Configuration Options

OptionTypeDefaultDescription
data-project-idstringRequiredYour unique project ID
data-positionstringbottom-rightWidget position: bottom-right, bottom-left, center
data-themestringautoTheme: light, dark, auto
data-primary-colorstring#0066ccPrimary brand color
data-greetingstringHi! How can I help?Initial greeting message
data-placeholderstringAsk a question...Input placeholder
data-button-textstringAskSubmit button text
data-auto-openbooleanfalseOpen widget on page load
data-hide-brandingbooleanfalseHide Ask0 branding (Pro)
data-languagestringautoInterface language
data-z-indexnumber9999Widget z-index

JavaScript API

Control the widget programmatically:

// Wait for Ask0 to load
window.addEventListener('ask0:ready', function() {
  // Open the widget
  window.ask0.open();

  // Close the widget
  window.ask0.close();

  // Toggle the widget
  window.ask0.toggle();

  // Set a custom user ID
  window.ask0.identify({
    id: 'user-123',
    email: 'user@example.com',
    name: 'John Doe'
  });

  // Trigger a specific question
  window.ask0.ask('How do I get started?');

  // Listen for events
  window.ask0.on('message', (data) => {
    console.log('User asked:', data.question);
    console.log('AI responded:', data.answer);
  });
});

Community Platforms

Coming Soon: Native integrations for Discord, Slack, and GitHub are in development. These will allow Ask0 to respond directly in your community channels.

Discord Bot (Coming Soon)

  • Respond to questions in Discord channels
  • Slash commands for quick help
  • Thread-based conversations

Slack App (Coming Soon)

  • Answer questions in Slack channels
  • DM support for private help
  • Workflow integration

GitHub App (Coming Soon)

  • Auto-respond to issues
  • Suggest solutions in discussions
  • PR comment assistance

Advanced Integration

Content Security Policy (CSP)

If your site uses CSP, add these directives:

Content-Security-Policy:
  script-src 'self' https://assets.ask0.ai;
  connect-src 'self' https://api.ask0.ai wss://stream.ask0.ai;
  frame-src 'self' https://widget.ask0.ai;
  style-src 'self' 'unsafe-inline' https://assets.ask0.ai;

Lazy Loading

Load Ask0 only when needed:

// Load on user interaction
document.getElementById('help-button').addEventListener('click', () => {
  if (!window.ask0) {
    const script = document.createElement('script');
    script.src = 'https://assets.ask0.ai/scripts/ask.js';
    script.dataset.projectId = 'YOUR_PROJECT_ID';
    script.onload = () => {
      window.ask0.open();
    };
    document.body.appendChild(script);
  } else {
    window.ask0.open();
  }
});

Server-Side Rendering (SSR)

For SSR applications, ensure the script loads only on the client:

// Check if running in browser
if (typeof window !== 'undefined') {
  // Load Ask0 script
}

Troubleshooting

Widget Not Appearing

  • Verify the project ID is correct
  • Check browser console for errors
  • Ensure the domain is whitelisted in project settings
  • Verify CSP policies allow Ask0 domains

Styling Conflicts

  • Increase z-index if widget is hidden
  • Check for CSS conflicts with your site
  • Use the data-z-index attribute to adjust

Testing Integration

Development Environment

Test locally before deploying:

// Use development project ID
const projectId = process.env.NODE_ENV === 'development'
  ? 'dev_project_id'
  : 'prod_project_id';

Staging Environment

Set up a separate project for staging:

  1. Create a staging project in Ask0
  2. Use staging project ID in your staging environment
  3. Test thoroughly before production

Next Steps

Customize Widget

Style and brand your chat widget

Configure Sources

Add content for the AI to learn from

View Analytics

Monitor usage and performance

Knowledge API

Programmatically ingest and manage knowledge through our API (Coming Soon). REST endpoints for content ingestion and knowledge base management.

Fumadocs Integration

Add AI search and chat to your Fumadocs documentation. Integrate Ask0 with Fumadocs using React components or script tags.

On this page

Quick Integration
Integration Categories
Documentation Platforms
Fumadocs
Docusaurus
GitBook
MkDocs
Sphinx
Hugo
ReadTheDocs
Marketing Sites
WordPress
Webflow
Squarespace
Wix
Static HTML Sites
Web Applications
React / Next.js
Vue.js
Angular
Svelte / SvelteKit
Remix
Gatsby
Configuration Options
All Configuration Options
JavaScript API
Community Platforms
Discord Bot (Coming Soon)
Slack App (Coming Soon)
GitHub App (Coming Soon)
Advanced Integration
Content Security Policy (CSP)
Lazy Loading
Server-Side Rendering (SSR)
Troubleshooting
Testing Integration
Development Environment
Staging Environment
Next Steps