Framer’s Custom Code settings add a script to every page of your site. You paste the widget code there.

​
Before you start

  • Your website widget. Kelu makes one for you when you create a knowledge base. Find it under Integrations → Website widget. You need the widget id and public key from the code on its Install tab.
  • Your site’s address on the widget’s Sites it works on list (Install tab). Add your custom domain and any Framer address you use, such as https://yoursite.framer.website.

​
Add the widget

The widget’s Install tab shows these same steps with your code already filled in.
1

Open Custom Code

Open Project Settings and choose the Custom Code tab on the left.
2

Add a script

Click Add Script, or the + icon if you already have one. Name it, for example Kelu Ask AI, and paste the snippet:
<script async src="https://widget.kelu.dev/kelu-widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-client-key="kl_pk_..."></script>
Use the code from your widget’s Install tab, or replace YOUR_WIDGET_ID and kl_pk_... with its values.
3

Choose where and how often it runs

Place it at the end of the body. Do not pick single pages, so it runs on every page. For how often it runs, choose Once, so the widget is added only one time.
4

Publish

Publish your site. Framer does not run custom code in the canvas preview, only on the published site.

​
Check it works

Open any page of the published site. A round icon button appears in the bottom-right corner, with the tooltip Ask AI. Ask a question and check that the answer lists its Sources. Nothing there? See Troubleshooting.