Basic Link Integration

Print Friendly, PDF & Email

Content

Demo

This demo simulates the presence of 3 agents and 1 visitor (bottom-right).
As shown in the demo, the visitor can see who is actually connected but the agents cannot know if a visitor is navigating on the website.

Online demo

Requirements

API Key

You must get your API Key before starting the integration. Go in your account at //cloud.apizee.com and you can find your API Key in “settings > Api and deployment” submenu. If you don’t have a Key, please contact us.

Connected mode

Copy-paste code below and change the apiCCkey value by your own API Key.

 <script type="text/javascript" src="//cloud.apizee.com/intracom/loaderIntracom.js"></script>
var apiCCkey = "API key from Apizee",
userInfos = {
id: xx,
nickname: "John",
firstName: "John",
lastName: "Doe",
mail: "john.doe@mail.com",
photoUrl: "//your-domain.tld/user-photo.jpg"
};
loadIntracom(apiCCkey, userInfos);

Configuration

Here is the configuration part of IzeeLink integration.

Every user of your company must meet the following requirements:
You can get this informations directly from user account on your website

• An unique ID (use a random ID by example or ID of user account on your website)
• A Nickname
• A FirstName
• A LastName
• An email
• An avatar/photo url

As an example, if Steven Smith is a user of your website and he is connected to it, the parameters of his account will be visible in the IzeeLink loader:

userInfos = {
id: 240,
nickname: "Steve",
firstName: "Steven",
lastName: "Smith",
mail: "steven.smith@mywebsite.com",
photoUrl: "//mywebsite.com/steven_smith.png"
};

Anonymous mode

Copy-paste code below and change the apiCCkey value by your own API Key.

 <script type="text/javascript" src="//cloud.apizee.com/intracom/loaderIntracom.js"></script>
var apiCCkey = "API key from Apizee",
userInfos = {
nickname: "Visitor",
firstName: "",
lastName: "",
mail: "",
photoUrl: ""
};
loadIntracom(apiCCkey, userInfos);

Configuration

Here is the configuration part of IzeeLink integration.

Every visitor on your website is required to fill in some information:
Note that some paramaters must be empty

• A Nickname
• An empty FirstName
• An empty LastName
• An empty email
• An empty photo url or if you want set your own anonymous image, put your url

With this integration, all visitors on your website will be connected to IzeeLink anonymously and will be able to see all agents (connected or not), but agents won’t be able to see visitors.

Buttons Integration

To insert a call button on the page, simply set a block or div with the CSS class Name “intracomUserStatus”:

Replace “XX” with the id of the user (visible in your database) and indicate the user’s name in the “title” field.

The Intracom completes a script block with the HTML needed to display presence information and chat/call buttons.

The default class is used to display the presence, chat or call buttons within the block: intracom-button

The complete list of class and usage:

Classname usages

Functions performed

Icons

intracomUserStatus By default presence + chat + video call + group (if another box is present)
intracomUserStatus presence Presence only  Presence only
intracomUserStatus chat chat only  Chat only
intracomUserStatus group groupe chat (if another box is present)  Ajouter un participant chat
intracomUserStatus call Video call  Video call
intracomUserStatus audio Audio only call  Audio only intracom

The functions can be combined in different way by defining css classes. For example:

<span class="intracomUserStatus presence chat audio" rel="36" title="Paul"></span>

… will result in :

Customization

Chatbox

The box can be redesigned by changing the CSS stylesheet. This can be done with the additionnal parameter comboxDesignURL:

var apiCCkey = "API key from Apizee",
userInfos = {
id: xx,
nickname: "John",
firstName: "John",
lastName: "Doe",
mail: "john.doe@mail.com",
photoUrl: "//your-domain.tld/user-photo.jpg"
},
intracomAppCallback = false,
intracomParams = {
comboxDesignURL: '//cloud.apizee.com/comBox/v3.9/combox-design-3.9.css'
};

loadIntracom(apiCCkey, userInfos, intracomAppCallback, null, intracomParams);

ComBox provides a template design in combox-design stylesheet. You can find the source at //cloud.apizee.com/comBox/v3.9/combox-design-3.9.css

Take into consideration that Combox includes a reset CSS for root container #comBoxAll to avoid interference with existing website. You must use more powerful CSS selectors to apply style on this structure.

Conclusion

At this stage, you are ready to start the IzeeLink experience. If you want more information for an advanced integration (Language, design…) please refer to the specific documentation at this address

Was this article helpful to you? Yes No