Implementation of the Face2 button

Add Face2 button on your site

This step is the most important in activating Oktium communication from your website. Just copy the code below with Face2 button and implement it on your website. Copy this code to your websites code and insert Face2 key. For more info send an email to info@oktium.com.

Code

For floating Face2 button on Homepage use following code:

<body>

————————————

<script type="text/javascript">
  constface2params={
    face2Key:"YOUR FACE2 KEY",
    tooltip:true,
    tooltipText:"Start video call",
    cornerRounding:true,
    directCall:true,
    returnUrl:true,
    position:"right",
  };
  constf2s=window.document.createElement("script");

  f2s.defer=true;
  (f2s.src="https://face2.oktium.com/face2widget.js"),
  (f2s.onload=function() {
    newwindow.Oktium(face2params).init();
  }),

  document.head.appendChild(f2s);

</script>

————————————

</body>

SRP (inventory) and VDP (product detail) pages:

For several Face2 buttons to appear on one URL you need to remove `position` parameter. Then you need to add element to page `<div id="face2"></div>` where will be placed Face2 button.

For fixed Face2 button for detail and inventory pages use the following code:

<body>

————————————

<div id="face2"></div>


<script type="text/javascript">
constface2params={
face2Key:"YOUR FACE2 KEY",
tooltip:true,
tooltipText:"Start video call",
cornerRounding:true,
directCall:true,
returnUrl:true,
};
constf2s=window.document.createElement("script");

f2s.defer=true;
(f2s.src="https://face2.oktium.com/face2widget.js"),
(f2s.onload=function() {
newwindow.Oktium(face2params).init();
}),

document.head.appendChild(f2s);

</script>

————————————

</body>

Face2 key generating

Go to Dashboard oktium.com/4B

Log In with your Oktium 4B credentials

Open Business detail

Click Generate widget

Set Parameters

Name	Type	Attribute	Description
params	object		Valid Object, as described above
face2Key	string	required	Face2Key generated in Dashboard.
directCall	boolean	optional default: true	param.directCall The generated link will start a call.
tooltip	boolean	optional default: false	param.tooltip Show Tool tip at mouseover.
tooltipText	string	optional	param.tooltipText Custom tooltip text, setting it to false will result in using the default text.
position	string	optional accepts: "left" or "right"	param.position If Position is set to "left" or "right", then it will render the widget as float/fixed position.
productName	string	required	productName Name of the product listed on your website.
returnUrl	boolean	optional default: false	redirect back after call
target	string	optional default: "face2"	element where widget will be rendered
meta	object	optional	include any parameters which you want to pass back to your system after call is done. ie clientId: "123456", product:"XYZ",
face2Img	string	optional	replace Face2 image for your own image
face2Boost	array	optional	add list of branch Id's where would you like your call redirected in case of no answer in your initial destination.

Copy and Paste the code into your website's code.

Methods

init()

Initiate the loading of the Face2 button.

getFace2Link()

To wrap your own HTML element into <a> with your Face2 link. It requires you to pass your element ID

getFace2Link('yourCustomElement').

kill()

Remove the Face2 button from your page.

reload()

You can update button configuration by passing new options reload(Face2Params).

on()

May work as a callback when the button is fully loaded on("loaded", callbackFunction).

Design

Design Face2 button to match your brand’s image. You can choose Face2 button color in dashboard. Remember that text must be white.

You can decide what copy will be displayed to customers and what will be Face2 button placement.

Articles in this section

Add Face2 button on your site

Code

Face2 key generating

Methods

init()

getFace2Link()

kill()

reload()

on()

Design

Comments

Articles in this section

Add Face2 button on your site

Code

Face2 key generating

Methods

init()

getFace2Link()

kill()

reload()

on()

Design

Related articles