Webflow
Add an Embedded AI Chat to your Webflow site
What is Webflow
Webflow is a visual web development platform that enables users to design, build, and launch websites without the need for coding.
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
- Navigate to Site settings (not the designer)
- Open the Custom code tab
- Add the below to the Head code section
<script id="inkeep-script" src="https://unpkg.com/@inkeep/uikit-js@0.3.13/dist/embed.js" type="module" defer></script>
Create a new page
Next, you need to create a new page for the chat widget. You can do this using the built-in Webflow designer.
Add a container to the page
Select Container from the list of elements and add it to the page:
Set the container ID
Set the ID of the container to inkeepEmbeddedChat
:
Configure the widget
Go back to Site settings and navigate to Custom code. Add the below in the Footer code section.
<script type="text/javascript" defer>
const widgetContainer = document.getElementById("inkeepEmbeddedChat");
const addInkeepWidget = function () {
const inkeepScript = document.getElementById("inkeep-script");
inkeepScript.addEventListener("load", () => {
const inkeepWidget = Inkeep().embed({
componentType: "EmbeddedChat",
targetElement: widgetContainer,
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?",
],
},
},
});
});
};
addInkeepWidget(); // initialize the widget
</script>
Press Save to apply your settings.
As a result, a chat widget will be added to the Ask AI page:
For a full list of customizations, check out the Common Settings.