Skip to main content

Add AI to Framer

Integrate the kapa.ai chat widget into your Framer website to enable users to ask natural language questions about your product, significantly enhancing user experience by providing quick and accurate answers.

Prerequisites​

Before adding the widget to your Framer site, you'll need to:

  1. Ensure you have a kapa.ai project set up with your knowledge sources added
  2. Follow the general installation instructions to enabled your domain and obtain your Website ID

Installation​

Using Custom Code​

  1. In your Framer project, click on the Settings icon (⚙️) in the top toolbar
  2. Select Custom Code from the menu
  3. Click on + Add Code to create a new code block
  4. Add the following HTML code:
<script
  async
  src="https://widget.kapa.ai/kapa-widget.bundle.js"
  data-website-id="XXX-XXX-XXX"
  data-project-name="PROJECT_NAME"
  data-project-color="#HEX_COLOR_CODE"
  data-project-logo="https://LINK_TO_LOGO.com/logo.png"
></script>

Alternative Method: Using Head Code Injection​

If you prefer, you can also add the widget using Framer's head code injection feature:

  1. In your Framer project, click on the Settings icon (⚙️)
  2. Navigate to the General tab
  3. Scroll down to find the Head Code section
  4. Paste the same script code shown above
  5. Click Save
Customization Options

To tailor the widget to your brand and specific needs, visit our Configuration page. There, you'll find detailed instructions on how to adjust colors, logos, and other widget properties.