HTML5 icon AIhelp HTML5 Integration Guide


1. Import

1.1 On Mobile Web Page: import below js file

https://aihelp.net/elva/elvah5/elvactrl.js

1.2 On PC Web Page: import below js file

https://aihelp.net/static/js/elvactrl.js

2. Create Initial Parameters

  1. You need to create initial parameters [object] in your local js files.
  2. Pass in below parameters: "gameid,gameuid,gameName,username,language,hsTags,autoEntrance" etc.

Coding Example:

var elva_conf = {
  appId: `${appId}`,
  appName: `${appName}`,
  userUid: `${userUid}`,
  userName: `${userName}`,
  language: `${language}`,
  hsTags: `${hsTags}`,
  autoEntrance: `${autoEntrance}`
}  
                  

appId: The id of different platforms, here you need to use the web appid. Required.

appName: Application name. Required.

userUid: User id. Optional,AIHelp will give priority to the userUid you wrote. If the userUid is empty, AIHelp will generate a unique identifier based on the user's device and browser as the user userUid.

userName: Optional,AIHelp will give priority to the userName you passed. AIHelp will name all users who have not passed userName as Unknown_User.

language: Required,Otherwise AIHelp will default the current user language to English.

hsTags: Tag. Optional,The tag will be displayed in the AIHelp customer service back-end complaint.

autoEntrance: Whether to intelligently hide the 'manual customer service' entrance.Optional.If you want to open, please write '1', it will hide the entrance intelligently. It will only be displayed after the user submits the form or the customer service sends the information to the user. Otherwise, please set it blank and it will always display the 'manual customer service' entrance.

3. Call method elvah5.init() with "elva_conf"

Coding Example:

  if (typeof elvah5 !== undefined) {
      elvah5.init(elva_conf)
  }
                  

4. Call method elvah5.show()

In your page's UI event handler, call elvah5.show to show elva box.

Coding Example:

  btn.onclick = function () {
      elvah5.show()
  }
                  

5. Customize the style of your elva box

Coding Example:

  .elvaBox {    //chat interface
    width: 375px;
    height: 500px;
    position: fixed;
    right: 1rem;
    bottom: 4rem;
  }

  .close {   //close button(PC Web Page)
    position: absolute;
    right: -10px;
    top: -16px;
    width: 30px;
    height: 30px;
    background: #f9c633;
    border-radius: 25px;
    cursor: pointer;
  }

  .close:hover {
    background: #bbb;
    transition: all .3s ease;
  }

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

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

Rendering on PC:

AIHelp Elvabox customize HTML5

Rendering on mobile:

AIHelp Elvabox customize HTML5

Example:

AIHelp Elvabox customize HTML5

Another mobile access method

No need to call elvah5.show()

When accessing AIHelp on the mobile side, we prefer to use link jump access for better user experience.


Example:

href=`https://aihelp.net/elva/elvah5/#/gameid/${appid}/gameuid/${uid}/gameName/${gameName}/username/${userName}/lan/${language}/hsTags/${tag}?autoEntrance=1`

Rendering:


AIHelp Elvabox customize HTML5