Framer

The CrawlDesk Ask AI widget enhances your Framer website by adding an interactive AI-powered assistant that allows users to ask natural language questions directly within your site. The widget is integrated via a lightweight script embed, hosted at https://cdn.crawldesk.com/widget.iife.js.

This guide details how to deploy the Ask AI widget in a Framer website using the script embed method, including configuring a CrawlDesk project and embedding the widget script.

Prerequisites:

• Active CrawlDesk account (sign up at https://app.crawldesk.com).
• Framer website set up with a plan that supports custom code (e.g., Pro or higher).
• CrawlDesk widget API key (obtained from the CrawlDesk dashboard).

Deploying the Ask AI Widget

Follow these steps to deploy the CrawlDesk Ask AI widget in your Framer website using the script embed method.

Using Custom Code

1. Access Framer Settings
   In your Framer project, click on the Settings icon (⚙️) in the top toolbar.
   Select Custom Code from the menu.

2. Add the Widget Script
   Click on + Add Code to create a new code block.
   Paste the following HTML code:

   <script
     src="https://cdn.crawldesk.com/widget.iife.js"
     onload="initAIWidget({
       key: 'YOUR_CRAWLDESK_WIDGET_KEY'
     })"
   ></script>

   Replace YOUR_CRAWLDESK_WIDGET_KEY with your actual CrawlDesk API key (e.g., wk_live_481518cb45d758df71b0548b979ad8192506c1b5ea33da1e).

Alternative Method: Using Head Code Injection

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

1. Access Head Code Section
   In your Framer project, click on the Settings icon (⚙️).
   Navigate to the General tab.
   Scroll down to find the Head Code section.

2. Add the Widget Script
   Paste the same script code shown above into the Head Code section:

   <script
     src="https://cdn.crawldesk.com/widget.iife.js"
     onload="initAIWidget({
       key: 'YOUR_CRAWLDESK_WIDGET_KEY'
     })"
   ></script>

   Replace YOUR_CRAWLDESK_WIDGET_KEY with your actual CrawlDesk API key.
   Click Save to apply the changes.

3. Secure the API Key
   Since Framer scripts are client-side, avoid exposing sensitive information. Manage the API key securely in your CrawlDesk dashboard and follow Framer’s security best practices for handling custom scripts to ensure the key remains protected.

info

Since Framer loads custom scripts globally, ensure you follow security best practices when adding custom scripts to your website. For example, keep your widget key secure and avoid exposing sensitive information. You may need to publish your Framer site to ensure the changes take effect.