​
What is Framer

Framer is a tool for creating interactive websites.

​
Get an API key

  1. Go to the Inkeep Dashboard
  2. Select your project under Projects
  3. Go to the Integrations tab
  4. Click on Create integration
  5. Select Web
  6. Provide a Name and URL (optional) for the integration
  7. Click on Create
  8. Click the Example < /> button to get your API key and view suggested settings

​
Connect the script

  1. Open Site Settings in the drop-down menu
  2. Click on the Open Settings tab
  3. Go to the General section
  4. 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.

  1. Select an area to add a container
  2. Select the Embed item in the Utility section
  1. Add an html element to the page
  1. 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.

Chat ButtonChat Button