Integration Example

Full HTML integration example:

This example uses buildWithDomainCredentials to build the SDK, as explained in the main page.

Note: All examples shown are set in a Production environment.

This example shows how to:

  • Set the settings that the SDK will be using as chatbot messages (in the conversation window and side window)
  • Decide if we want a proactive welcome message before the conversation starts.
  • Define the side window delay duration when showing automatically after receiving an answer.
  • Use the development environment.
  • Add some text in the chatbot launcher.
  • Edit some labels
  • Set the values for the ratings.

Scroll down to the bottom of this page to see two screenshots that show the Chatbot after its initialization.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="https://sdk.inbenta.io/chatbot/1/inbenta-chatbot-sdk.js"></script>
</head>
<body>
</body>
</html>
<script>
  var authorization = {
    domainKey:"<example_domain_key>",
    inbentaKey:"<example_inbenta_key>"
  }
  InbentaChatbotSDK.buildWithDomainCredentials(authorization,
    {
      lang:'en',
      answers:{
        answerAttributes: ['ANSWER_TEXT'],
        sideBubbleAttributes: ['SIDEBUBBLE_TEXT'],
        maxRelatedContents: 3,
      },
      proactiveWelcome : true,
      delayOnAnswer: 700,
      usertype: 0,
      environment: "development",
      launcher: {
        title:"InbentaBotSDK"
      },
      labels: {
        en: {
          'yes' : 'Sure',
          'no' : 'Nope',
          'generic-error-message' : 'Please try to answer again',
          'enter-question' : 'Ask here',
          'interface-title' : 'SDK Demo',
          'guest-name' : 'You',
          'help-question' : 'What can I help you with?',
          'thanks' : 'Thank you!',
          'rate-content' : 'Did it help?',
          'form-message' : 'Please tell us why',
          'submit' : 'Send'
        }
      },
      ratingOptions: [
        {
          id: 1,
          label: 'yes',
          comment: false
        },
        {
          id: 2,
          label: 'no',
          comment: true
        }
      ],
    }
  );
</script>

Chatbot launcher: alt text

Chatbot: alt text