Introduction

This adapter shows a survey from the Chat instance when a user finishes the conversation. There are two actions that indicate that the user finished the conversation and therefore trigger the survey.

• When a user clicks on the "Close" button of the conversation window and confirms that they want to leave the conversation, the survey appears in the conversation window.
• If an adapter calls the resetSession action in a middle of a Chat conversation, the survey appears in the conversation window.

While the survey is open, the user can answer the survey questions, close the conversation window or hide the survey.

• If they submit the survey responses, it closes the Chat conversation.
• If they close the conversation window, it closes the Chat conversation without submitting any survey responses.
• If they hide the survey, they can continue with the Chat conversation. The survey does not appear again to the user unless the page is refreshed.

Internal Adapter

This adapter is included in the Chat SDK to show the survey when the user closes the conversation window. The internal survey adapter is available in the Chat SDK from version 1.53.0. The additional config parameter is available in the Chat SDK from version 1.72.0.

To use the internal adapter, you must set the adapter in the adapters array following the example below:

adapters: [
  SDKInbentaChatbotSurveyAdapter(surveyId, config),
]

Parameters

• surveyId: Survey ID to be displayed. Make sure that a Survey already exists in the instance.
• config: Object with different configuration parameters
  • delayCloseOnAnswer (default: 0): number of milliseconds between the user successfully answers a survey and the Chat closing the window and session.

If this adapter meets your needs, you can use it as explained above. If you need to modify its behaviour, copy the code from the Inbenta Github page to a new Javascript file and import it into your configuration. Remember that, if you do this, you must add your customized survey adapter name into the adapters array list.

Adapter code and public Github repository

This adapter can be found in the Inbenta Github adapters repository.

How does it work?

1. First, set up closeButton:{visible:true} in the configuration to show the "Close" button. Then, use the custom-html to remove the close customConversationWindow, because you want users to complete the survey before they leave the conversation.

2. Use the onResetSession subscription to detect when a user confirms they want to leave the conversation and interrupt the action. Next, use the API client's getSurvey method to retrieve the URL of the selected Survey.

3. Once the getSurvey request is completed, display the survey as an iframe inside the conversationWindow. To do this, call ShowCustomConversationWindow with

     <iframe name="inbenta-survey" src=' + data.url + '></iframe>

4. If the user completes the survey, you can detect it by adding an eventListener that the survey triggers upon completion:

   window.addEventListener("message", receiveMessage, false);
   
   function receiveMessage(event) {
     if (event.data.message == "inbenta.survey.successful_answer") {
       surveyProcess='Finished';
       chatbot.actions.resetSession();
     }
   }

   Once detected, you finally call the resetSession action to close the Chat SDK.

5. If the user clicks on the "Close" button again before they complete the Survey, force a resetSession and close the Chat SDK with a ondisplaysystemmessage subscription.

Actions and Subscriptions required

This adapter uses the following actions:

• ShowCustomConversationWindow to display the iframe inside the customConversationWindow.

• resetSession to close the Chat after the survey is complete.

In addition to the actions, it also uses the following subscriptions:

• onResetSession to detect if the user chose to leave the conversation, to display the survey.

• ondisplaysystemmessage to detect when the user clicked on the "Close" button before they finish the survey, to close the Chat SDK.

Configuration parameters

• surveyID: Survey ID to be displayed inside the iframe. Make sure that a Survey already exists in the project instance, and use its given id.

  adapters: [
      showSurvey(surveyID),
  ]

HTML demo with the configurations

In the following configuration, see the use of closeButton and custom-html to hide the close CustomConversationWindow. For more information, see the configurations section.

<script src="survey.js"></script>
<script>
  var surveyID = 1;
  const domainKey = <domainKey>;
  const key = <key>;
   var authorization = {
    domainKey:"<example_domain_key>",
    inbentaKey:"<example_inbenta_key>"
  }
InbentaChatbotSDK.buildWithDomainCredentials(authorization, {
  closeButton:{
    visible:true
  },
  html : {
    'custom-window-header':
        '<div></div>'
      },
  adapters: [
    SDKInbentaChatbotSurveyAdapter(surveyID)
  ]
});
</script>