Framer Integration

Add Ask0 to your Framer website with custom code component. Integrate intelligent search into Framer-built sites and landing pages.

Add Ask0 to your Framer website or portfolio.

Installation

Site Settings

Open your Framer project
Click the Settings icon (⚙️) in the top toolbar
Navigate to General → Custom Code
Add the following in the End of <body> tag section:

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="YOUR_PROJECT_ID"
  data-position="bottom-right"
  data-theme="auto"
  async
></script>

Page-Specific Integration

To add Ask0 to specific pages only:

Select the page in your Framer project
Open the Page Settings panel
Scroll to Custom Code
Add the script in the End of <body> tag section

Custom Component

Create a custom code component for more control:

Create a new Code Component
Name it "Ask0Widget"
Add this code:

Ask0Widget.tsx

import { useEffect } from 'react';

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

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

  return null;
}

Drag the component onto your canvas (it's invisible but will load the widget)

Custom Button

Create a custom button to open the widget:

Ask0Button.tsx

import { useEffect, useState } from 'react';

export default function Ask0Button() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const checkAsk0 = () => {
      if (window.ask0) {
        setIsReady(true);
      } else {
        setTimeout(checkAsk0, 100);
      }
    };
    checkAsk0();
  }, []);

  const handleClick = () => {
    window.ask0?.open();
  };

  if (!isReady) return null;

  return (
    <button
      onClick={handleClick}
      style={{
        padding: '12px 24px',
        background: '#000',
        color: '#fff',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontSize: '16px',
      }}
    >
      Ask AI
    </button>
  );
}

Add TypeScript declarations:

declare global {
  interface Window {
    ask0?: {
      open: () => void;
      close: () => void;
      toggle: () => void;
    };
  }
}

Theme Synchronization

Sync with Framer's theme:

Ask0Synced.tsx

import { useEffect } from 'react';

export default function Ask0Synced() {
  useEffect(() => {
    const updateTheme = () => {
      const isDark = document.documentElement.classList.contains('dark');
      const theme = isDark ? 'dark' : 'light';

      if (window.ask0) {
        window.ask0.setTheme?.(theme);
      }
    };

    // Initial theme
    updateTheme();

    // Watch for theme changes
    const observer = new MutationObserver(updateTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class'],
    });

    return () => observer.disconnect();
  }, []);

  return null;
}

Environment Variables

For Framer sites with multiple environments:

Use Framer's Site Variables feature
Create a variable named ask0ProjectId
Reference it in your custom code:

const projectId = process.env.FRAMER_ask0ProjectId || 'YOUR_PROJECT_ID';

Framer Tips:

Use Custom Code in site settings for global loading
Create Code Components for reusable functionality
Framer uses React under the hood
Test in preview mode before publishing
Custom components work on all Framer plans