HTML5

AIHelp HTML5 SDK Integrating #

Note:

Due to the particularity of the web platform, the integrating will be slightly different from other platforms.

When integrating AIHelp HTML5 SDK, you need to get all your configurations done before you call AIHelpSupport#init(), which handles the SDK’s initialization and rendering work.

After the initialization, you can display SDK pages wherever by calling AIHelpSupport#show() .

We’ll provide you a step-by-step integrating example in this page, we also provide more details, explanations and examples with scenarios in the specific modules of this doc, in case of you may be kind of confusing about the following integrating demo. Or, you can just check here for more infomation.

1、import aihelp.js in your .html:

<script src="https://aihelp.net/webchat/aihelp.js"></script>

2、Declare a self-executing function to ensure that the initialization of AIHelp SDK starts in time to improve user experience:

<script>
    (function () {
        // do AIHelp SDK init at here
    })();
</script>

3、Take showing bot support for instance, configure the init parameters, please be aware that parameters such as appId, domain, appKey, and supportMode are always required no matter what circumstances:

<script>
    (function () {
        var initConfig = {
            appKey: 'THIS IS YOUR APP KEY',
            domain: 'THIS IS YOUR APP DOMAIN',
            appId: 'THIS IS YOUR APP ID',
            appName: "THIS IS YOUR CUSTOM APP NAME(OPTIONAL)",
            language: 'THIS IS YOUR DEFAULT LANGUAGE(OPTIONAL)',
            supportMode: 'showConversation',
        }
        if (typeof AIHelpSupport !== undefined) AIHelpSupport.init(initConfig);
    })();
</script>

4、Call AIHelpSupport#show() in where you need to display AIHelp:

if (typeof AIHelpSupport !== undefined) AIHelpSupport.show();

5、In addition, you can custom your AIHelpSupport div style like follows:

Custom CSS style for AIHelpSupport
.AIHelpSupportBox {   
	width: 375px;
	height: 500px;
	position: fixed;
	right: 1rem;
	bottom: 4rem;
}

.close {  
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	color: #fff;
	background: #f9c633;
	border-radius: 25px;
	cursor: pointer;
}

.close:before {
	position: absolute;
	content: '';
	width: 20px;
	height: 2px;
	background: #fff;
	transform: rotate(45deg);
	top: 14px;
	left: 6px;
}

.close:after {
	content: '';
	position: absolute;
	width: 20px;
	height: 2px;
	background: #fff;
	transform: rotate(-45deg);
	top: 14px;
	left: 6px;
}

Here are the corresponding front end UI: