Skip to main content

Add AI to Salesforce Service Cloud

Integrate the kapa.ai chat widget into your Salesforce Service Cloud to enable users to ask natural language questions about your product, significantly enhancing user experience by providing quick and accurate answers.

Prerequisites​

Before adding the widget to your Salesforce Service Cloud, you'll need to:

  1. Ensure you have a kapa.ai project set up with your knowledge sources added.
  2. Follow the general installation instructions to enable your domain and obtain your Website ID.

Installation​

Access Salesforce Service Cloud Setup​

  1. Log in to your Salesforce Service Cloud account as an administrator.
  2. Navigate to the Setup section by clicking on the gear icon in the top right corner.

Create a New Lightning Component​

  1. In the Setup menu, search for Lightning Components and select Lightning Components under Custom Code.
  2. Click on New to create a new Lightning Component.
  3. Name your component (e.g., KapaWidgetComponent) and click Save.

Add the Widget Script to the Lightning Component​

Add the following code to include the kapa.ai widget script:

<aura:component>
  <ltng:require
    scripts="{!$Resource.kapaWidget}"
    afterScriptsLoaded="{!c.doInit}"
  />
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var script = document.createElement("script");
      script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
      script.setAttribute("data-website-id", "YOUR_WEBSITE_ID");
      script.setAttribute("data-project-name", "YOUR_PROJECT_NAME");
      script.setAttribute("data-project-color", "YOUR_HEX_COLOR_CODE");
      script.setAttribute("data-project-logo", "YOUR_LOGO_LINK");
      script.async = true;
      document.head.appendChild(script);
    });
  </script>
</aura:component>

Replace YOUR_WEBSITE_ID, YOUR_PROJECT_NAME, YOUR_HEX_COLOR_CODE, and YOUR_LOGO_LINK with your specific project parameters.

Add the Lightning Component to a Page​

  1. Navigate to the App Builder by searching for App Builder in the Setup menu.
  2. Select the page where you want to add the widget (e.g., Home Page or Record Page).
  3. Click on Edit next to the page name.
  4. Drag and drop the newly created KapaWidgetComponent onto the desired section of the page.
  5. Click Save and then Activate to make the changes live.

Test the Widget​

Navigate to the page where you added the widget to ensure it loads correctly and functions as expected.

By following these steps, you will successfully integrate the kapa.ai website widget into your Salesforce Service Cloud environment.