Framer
Add AI Search to your Framer website
What is Framer
Framer is a tool for creating interactive websites.
Get an API key
- Go to the Inkeep Dashboard
- Select your project under Projects
- Go to the Integrations tab
- Click on Create integration
- Select Web
- Provide a Name and URL (optional) for the integration
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
Connect the script
- Open Site Settings in the drop-down menu
- Click on the Open Settings tab
- Go to the General section
- Add the below to the Start of
<head>
tag section
<script id="inkeep-script" src="https://unpkg.com/@inkeep/uikit-js@0.3.12/dist/embed.js" type="module" defer></script>
Creating the container
Add a widget container to the page using the built-in Framer functionality.
- Select an area to add a container
- Select the Embed item in the Utility section
- Add an html element to the page
- Specify the ID of the container to be
inkeepSearchBar
Initialize the widget
Next, paste the script below into the End of <head>
tag section:
<script defer>
const inkeepScript = document.getElementById("inkeep-script");
// configure and initialize the widget
const addInkeepWidget = () => {
const inkeepWidget = Inkeep().embed({
componentType: "SearchBar",
targetElement: document.getElementById("inkeepSearchBar"),
properties: {
baseSettings: {
apiKey: "INKEEP_API_KEY", // required
integrationId: "INKEEP_INTEGRATION_ID", // required
organizationId: "INKEEP_ORGANIZATION_ID", // required
primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
organizationDisplayName: "Inkeep",
// ...optional settings,
theme: {
stylesheetUrls: ["/path/to/stylesheets"], // optional
// ...optional settings,
},
},
modalSettings: {
// optional settings
},
searchSettings: {
// optional settings
},
aiChatSettings: {
// optional settings
botAvatarSrcUrl: "https://mydomain.com/mylogo", // use your own bot avatar
quickQuestions: [
"Example question 1?",
"Example question 2?",
"Example question 3?",
],
},
},
});
};
const observer = new MutationObserver((mutationsList, observer) => {
const inkeepPortals = document.getElementsByTagName("inkeep-portal");
Array.from(inkeepPortals)?.forEach((inkeepPortal) => {
inkeepPortal.remove();
});
addInkeepWidget(); // initialize the widget
});
observer.observe(document.head, { attributes: true, subtree: true });
</script>
Save custom code
Click on the Save button. Navigate to your web application and reload the page, to make sure the widget is installed correctly.
For a full list of customizations, check out the Search Bar documentation.