What is Framer

Framer is a tool for creating interactive prototypes of user interfaces.

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/widgets-embed@0.2.274/dist/embed.js" type="module" defer></script>

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 = function () {
    const inkeepWidget = Inkeep().embed({
      componentType: "ChatButton",
      properties: {
        chatButtonType: "ICON_TEXT",
        baseSettings: {
          apiKey: "YOUR_API_KEY", // required
          integrationId: "YOUR_INTEGRATION_ID", // required
          organizationId: "YOUR_ORGANIZATION_ID", // required
          primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
          organizationDisplayName: "Inkeep",
          // ...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?",
          ],
        },
      },
    });
  };

  inkeepScript.addEventListener("load", () => {
    if (document.body) addInkeepWidget(); // initialize the widget
  });
</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 Chat Button documentation.

FAQ