Business - Face2 button & Face2 links

Implementation of the Face2 button

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.

Add Face2 button on your site

For a floating Face2 button on your homepage use the following code:

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

  f2s.defer = true
  f2s.src = 'https://face2.oktium.com/face2widget.js'
  f2s.onload = () => {
    new window.Oktium(face2Params).init()
  }

  document.head.appendChild(f2s)
</script>

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

To have several Face2 buttons appear on one URL, remove the position parameter and set a target matching a container element on the page — <div id="face2"></div> if you don't set target explicitly. Each widget instance needs its own id so they don't collide.

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

  <script type="text/javascript">
    const face2Params = {
      face2Key: 'YOUR FACE2 KEY',
      tooltip: true,
      tooltipText: 'Start video call',
      cornerRounding: true,
      directCall: true,
      returnUrl: true,
    }
    const f2s = document.createElement('script')

    f2s.defer = true
    f2s.src = 'https://face2.oktium.com/face2widget.js'
    f2s.onload = () => {
      new window.Oktium(face2Params).init()
    }

    document.head.appendChild(f2s)
  </script>
  ————————————
</body>

Parameters

Name	Type	Attribute	Description
face2Key	string	required	The Face2 key generated in Dashboard. Identifies your business and this widget instance.
id	string	optional, default: random	Instance id. Only needed when you run several Face2 widgets on the same page, so each can be tracked and updated independently.
position	string	optional, accepts `"left"` or `"right"`	Renders the button as a floating, fixed-position widget docked to that corner. Leave it unset to render inline instead (see `target`).
target	string	optional, default: `"face2"`	Id of the container element the button renders into when `position` is not set. Add a matching `<div id="…"></div>` to your page.
face2Img	string (URL)	optional	Overrides the button icon with a custom image instead of the default availability icon.
height	number (px)	optional, default: 45, clamped 27–60	Button height. Width follows a fixed aspect ratio.
buttonHeightDesktop	number (px)	optional	Overrides `height` on desktop only.
buttonHeightMobile	number (px)	optional	Overrides `height` on mobile only.
bgColor	string (CSS color)	optional	Overrides your business brand color for the button background.
colorInvert	boolean	optional, default: false	Uses your business's secondary brand color instead of the primary one. Ignored if `bgColor` is set.
spaceBottom	string (CSS length)	optional, default: `"20px"`	Distance from the bottom edge of the screen. Floating mode only (`position` set).
tooltip	boolean	optional, default: false	Shows a tooltip on hover (or first tap on mobile).
tooltipText	string \| false	optional, default: `"Start video!"`	Tooltip text. Plain text only.
cornerRounding	boolean \| number	optional, default: true	`true` uses the default corner radius, a number sets an explicit radius in px, `false` renders square corners.
title	string	optional, default: page title	Sent along with the generated call link — for example the product name on a product detail page.
directCall	boolean	optional, default: true	The generated call link starts a call immediately instead of opening your business page.
returnUrl	boolean	optional, default: false	Appends the current page URL to the call so the customer returns to it after the call.
meta	object	optional	Custom key/value pairs appended as query parameters to the generated call link.

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'). Use this instead of init() when you want to turn a button or link you already have on the page into the call trigger, rather than have Face2 render its own button.
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.

Face2 widgets