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 martin@oktium.com.
Code
For floating Face2 button on Homepage use following code:
<head>
————————————
<script src=“https://cdn.oktium.com/face2widget-latest.min.js”></script>
————————————
</head>
<body>
————————————
<script type=“text/javascript”>
var face2floating = new window.Oktium({
face2Key: "YOUR FACE2 KEY",
tooltip: true,
tooltipText: “Start video call”,
cornerRounding: false,
dc: true,
returnUrl: true,
position: “right”,
meta: {
product: “XYZ”,
}
});
face2floating.init();
</script>
————————————
</body>
SRP (inventory) and VDP (product detail) pages:
For several Face2 buttons to appear on one URL you need to add a parameter to constructor called `byClass`with value `true` and remove `position` parameter. Then you need to add elements to page `<a class="face2Fixed"></a>` which will be replaced by our button.
For fixed Face2 button for detail and inventory pages use the following code:
<head>
————————————
<script src=“https://cdn.oktium.com/face2widget-latest.min.js”></script>
<script type=“text/javascript”>
var myFace2Button = new window.Oktium({
face2Key: “YOUR FACE2 KEY”,
tooltip: true,
tooltipText: “Start video call”,
dc: true,
returnUrl: true,
cornerRounding: 5,
});
myFace2Button.init();
</script>
————————————
</head>
+
<body>
————————————
<a id="face2Button"></a>
————————————
</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. |
|
|
boolean |
optional
default: false
|
redirect back after call |
|
|
string |
optional
default:
|
element where widget will be rendered |
|
|
object |
optional |
include any parameters which you want to pass back to your system after call is done. ie
clientId: "123456",
product:"XYZ",
|
Copy and Paste code into your websites code.
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 will be displayed to customers and what will be Face2 button placement.
Comments
0 comments
Please sign in to leave a comment.