Skip to content

Instantly share code, notes, and snippets.

@jalcantarab

jalcantarab/_InbentaChatbotSDKSample.md

Last active May 8, 2023 13:33
Show Gist options
  • Save jalcantarab/e56f059455468094509c54fc951329dc to your computer and use it in GitHub Desktop.
Save jalcantarab/e56f059455468094509c54fc951329dc to your computer and use it in GitHub Desktop.
Download ZIP
Example of Custom Integration of the Inbenta Chatbot SDK
Raw
_InbentaChatbotSDKSample.md

Chatbot SDK Example - Custom Build

Simple example of a functioning chatbot SDK User Interface. All contained in one HTML file. This example is meant to show how to:

  • Customize configuration of the SDK build,
  • Customize the labels to align with your desired language and personality,
  • Customize some CSS to fit your colors and icons,
  • How to use the /auth API method to retrieve the API Token.

If you're looking for a more complex integration, or want to see the JS<>CSS<>HTML separate: GO HERE

Set up:

Either the HTML and add it to your page, or store the JavaScript and CSS in separate files and call them from the page you want ot integrate the chatbot in.

Usage

Replace the Secret and API key with your instance's Secret and API key.

Contributing

If you have useful new methods, or better ways of doing what this sample does, please feel free to...

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

History

First Version

Raw
sdk-chatbot-customSample.html
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://sdk.inbenta.io/chatbot/0/inbenta-chatbot-sdk.js"></script>
<style>
.inbenta .inbenta-bot__launcher {
background-color: transparent;
opacity: 1;
padding: 2px;
border-radius: 8px;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.16),0 3px 12px 0 rgba(0,0,0,.08);
width: 80px;
height: 80px;
transition: all .3s ease 0s
}
.inbenta .inbenta-bot__launcher:hover {
opacity: 0.7;
background-color: transparent;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.16),0 3px 12px 0 rgba(0,0,0,.08);
background-position: 50%;
padding: 2px;
border-radius: 8px;
width: 80px;
height: 80px;
}
.inbenta .inbenta-bot__launcher .inbenta-bot__launcher__image:hover {
background-image: url(https://www.inbenta.com/wp-content/themes/inbenta/img/icons/virtual-assistant.svg);
filter: hue-rotate(270deg);
background-position: 50%;
transition: all .3s ease 0.3s
opacity: 1;
width: 80px;
height: 80px;
}
.inbenta .inbenta-bot__launcher .inbenta-bot__launcher__image {
background-image: url(https://www.inbenta.com/wp-content/themes/inbenta/img/icons/virtual-assistant.svg);
background-position: 50%;
transition: all .3s ease 0.3s
filter: opacity(70%);
opacity: 1;
width: 80px;
height: 80px;
}
.inbenta .inbenta-bot__chat__header {
background-color: #fff;
color: #E3253A;
padding-top: 2px;
padding-bottom: 2px;
}
.inbenta .inbenta-bot__chat__header .header__title {
font-size: 20px!important;
font-weight: 900!important;
}
.inbenta .messages__message__avatar {
background-color: #fff!important;
}
.inbenta .messages__message .messages__message__content .content__buttons button.inbenta-bot-button {
background-color:#fff;
border: 3px;
border-radius: 100px;
box-shadow: none;
color: #E3253A;
}
.inbenta .messages__message .messages__message__content
.content__buttons button.inbenta-bot-button[disabled].clicked {
box-shadow: inset 0 0 1em gold;
opacity: .7;
font-weight: 600;
}
.inbenta button.footer__form__button.inbenta-bot-button {
color: #E3253A!important;
background-color:#fff!important;
}
.inbenta .inbenta-bot-icon.inbenta-bot-icon--avatar {
background-image: url(https://www.inbenta.com/wp-content/themes/inbenta/img/icons/virtual-assistant.svg);
background-position: 50%;
width: 80px;
height: 80px;
background-repeat: no-repeat;
opacity: 1;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>
<script>
initSDK();
function initSDK() {
var inbenta_secret="<inbenta-secret>";
var inbenta_key="<inbenta-key>";
var inbenta_token = authPOST(inbenta_key, inbenta_secret, initBot);
console.log(inbenta_token);
}
function initBot(inbenta_token, inbenta_key) {
var InbentaAuth = InbentaChatbotSDK.createFromAccessToken(inbenta_token,inbenta_key);
var InbentaConfiguration = {
lang:'en',
"answers":{
"answerAttributes": ["ANSWER_TEXT"],
"sideBubbleAttributes": ["SIDEBUBBLE_TEXT"]
},
usertype: 0,
environment: "development",
launcher: {
title:""
},
labels: {
en: {
'yes' : 'Sure',
'no' : 'Nope',
'generic-error-message' : "I'm still in training, please try again",
'enter-question' : 'Ask Me!',
'interface-title' : 'I.S.A. 000A',
'guest-name' : 'You',
'help-question' : "Hello!, I'm Inbenta Support Agent v0.1.0, what can I do for you?",
'thanks' : 'Thank you!',
'rate-content' : 'Did I help?',
'form-message' : 'Please tell me how I can get better',
'submit' : 'Send'
}
}
};
InbentaChatbotSDK.build(InbentaAuth, InbentaConfiguration);
}
function authPOST(inbenta_key, inbenta_secret, callback) {
var data = {"secret":inbenta_secret};
var xhr = new XMLHttpRequest();
var inbenta_token = "";
xhr.open("POST", "https://api.inbenta.io/v1/auth");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("x-inbenta-key", inbenta_key);
xhr.onreadystatechange = function() { //Call a function when the state changes.
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText).accessToken);
inbenta_token = JSON.parse(xhr.responseText).accessToken;
inbenta_token = JSON.stringify(inbenta_token);
callback(inbenta_token, inbenta_key);
return inbenta_token;
}};
xhr.send(JSON.stringify(data));
}
</script>
@yuliolinares
Copy link

i need examples for traking seccion user, for example: i need save other information in backstage01, other information for client

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment