Chat & Instant Answers Widgets

Maven offers widgets that allow you to embed a Maven experience directly into your website. Currently, there is a chat experience and an instant answers experience.

To add either widget to your website, you need to add a small piece of javascript to your page. This javascript code will initialize the widget and connect it to your Maven instance.

Your personalized code snippet can be found on either the chat settings page or instant answers settings page within the Dashboard. You’ll need to copy and paste the code snippet into your website’s HTML to get started. More specific instructions for common sites are provided below.

The chat widget currently supports one additional setting - the welcome message. This message will be shown to the user when they first open the chat widget.

The questions shown directly under the welcome message are configured on the Agent Settings page with the popular questions setting.

The chat widget’s background color and logo at the top of the widget are also configured on the Agent Settings page. They match the Brand Color and the Horizontal logo, respectively.

The instant answers code snippet requires a slightly deeper integration than the chat widget. It needs to know which piece of the page to attach the widget to and also needs to know when the user question has been submitted and what the question was. This requires a bit more HTML knowledge.

Setting up Zendesk help center

Zendesk provides instructions for customizing your help center theme. Follow those instructions to edit your theme.

For the chat widget you want to add your code snippet to script.js.

For the instant answers widget:

Goto “search_results.hbs”

Find

      {{#if results}}
        <ul class="search-results-list">

And replace with:

      <div id="maven-instant-answer-container" style="margin-bottom: 5px"></div>
      {{#if results}}
        <ul class="search-results-list">

Add the following to the end of the file and remember to replace the API KEY with your Maven API key found within the code snippet on the Instant Answers Settings page.

<script src="https://www.mavenwidgets.net/widget.js" async></script>
<script>
// This code loads the Maven widget when the page is first opened
addEventListener("load", function () {
  Maven.InstantAnswerWidget.init({
    apiKey: "REPLACE THIS WITH API KEY"
  });
  // If there is an HTML element on the page with the ID 'query'
  if (document.getElementById('query') !== null) {
    // Get the user question from the value of that element
    var text = document.getElementById('query').value;
    if (text) {
      console.log("Loading Maven with the question: " + text);
      Maven.InstantAnswerWidget.search({
        query: document.getElementById('query').value,
        selector: '#maven-instant-answer-container'
      });
    } else {
      console.log("No query found. Not loading Maven.");
    }
  } else {
    console.log("No HTML element found with the ID query. Not loading Maven.");
  }
}); 
</script>

If Maven does not render after adding this snippet, check the browser logs to see if either the query HTML element is missing or doesn’t have a value.

If you see those type of logs:

Your Zendesk instance may be putting the user question in another HTML element - if so change query in the above snippet to the ID of the HTML element that the user question does appear in
Or the question may only be in the page url, and not in the HTML at all. In this case, try replacing the above var text line with var text = new URLSearchParams(window.location.search).get("query");. (Note: you may also need to comment out the if statement that checks for the presence of the query element: document.getElementById('query') !== null)

Setting up Salesforce Digital Experience

The Maven Instant Answers widget can be added to a help center built on the Salesforce Content Management System (CMS). To allow a page hosted in the CMS to access Maven AGI, you will likely need to confirm or change a few security settings.

Trusted URLs for data access

First you must ensure that Salesforce can load data from Maven AGI. In the Salesforce setup navigation, search for “Trusted URLs”. In the Trusted URLs page, add entries for https://app.mavenagi.com and https://ORGID.onmaven.ai where ORGID is the ID of your organization.

Trusted Scripts

Next the CMS must be allowed to load scripts from Maven AGI. In Experience Builder for your site, open the settings and navigate to Security & Privacy. Change “Content Security Policy (CSP)” to Relaxed, then add https://www.mavenwidgets.net/ and https://ORGID.onmaven.ai to the “Trusted Sites for Scripts” list.

Add the Maven Script

In Settings for your site in Experience Builder, navigate to “Advanced” and press the “Edit Head Markup” button. In the editor, add the following snippet

1 <script src="https://www.mavenwidgets.net/widget.js" async></script>
2 <script>
3     // This code loads the Maven widget when the page is first opened
4     addEventListener("load", function () {
5       Maven.InstantAnswerWidget.init({
6         apiKey: "REPLACE THIS WITH API KEY"
7       });
8     }
9 </script>

Add the results container

In experience builder, add a “HTML Editor” component on the page where you would like the search results. Add the following markup:

1 <div id="maven-instant-answer-container"></div>

Add a search button, or hook the search button

To invoke search and start returning results from Maven, make the following Javascript call in a new button or when an existing search button is pressed

1 Maven.InstantAnswerWidget.search({
2     query: text,
3     selector: '#maven-instant-answer-container'
4 });

Still not working?

In general, if the instant answers widget renders but seems to load forever, this most likely means that Maven is being sent an empty question. Generally this means the user question needs to be pulled from a different HTML element on the page, or, it might be only in the page url. Reach out and we can help you fix this!

1	<script src="https://www.mavenwidgets.net/widget.js" async></script>
2	<script>
3	// This code loads the Maven widget when the page is first opened
4	addEventListener("load", function () {
5	Maven.InstantAnswerWidget.init({
6	apiKey: "REPLACE THIS WITH API KEY"
7	});
8	}
9	</script>

1	Maven.InstantAnswerWidget.search({
2	query: text,
3	selector: '#maven-instant-answer-container'
4	});

Chat Widget

Instant Answers Widget