Skip to main content

Add AI to Webflow

Integrate the kapa.ai chat widget into your Webflow 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 Webflow 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 Webflow project, click on Project Settings (⚙️) in the top navigation bar
  2. Navigate to the Custom Code tab
  3. In the Head Code section, paste the following script:
<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>
  1. Click Save Changes
  2. Publish your site to apply the changes

Per-Page Installation​

If you want to add the widget to specific pages only:

  1. Navigate to the desired page in Webflow Designer
  2. Click on the Settings panel (⚙️)
  3. Select Page Settings
  4. Scroll to the Custom Code section
  5. Add the same script code in the Before head tag field
  6. Click Save and publish your changes
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.

caution

If you're using Webflow's Basic hosting plan, custom code is not available. You'll need to upgrade to at least the CMS plan to use custom code functionality.