Custom Button Tutorial

The Custom Button Tutorial deals with an advanced topic, it’s intended for developers. We don’t recommend to all users to take on the setup of this integration. Faulty integrations will make the chat unusable.

How to add a custom chat button to your website

If you don't want to use the built-in Userlike chat button, you can add your own HTML element that triggers the chat function.

  1. Add the Userlike Widget Code to your website.
  2. Select any HTML element in your website to be your new chat button. Simply assign the ID "userlikeCustomTab" to it.

    <div id="userlikeCustomTab"></div>
  3. Add data attributes to specify where the Chat Widget is positioned on your page. For example:

    <div id="userlikeCustomTab" data-top="200" data-left="200"></div>

Here is an overview of supported data attributes:

Data-AttributeValueResult
data-positionDisplays the Widget relative to...
"button" (Default)the chat button
"window"the browser window
data-orientationWidget pops up on the...
"bottomRight" (Default)bottom right of the selected position
"bottomLeft"bottom left of the selected position
"top"top of the selected position
"bottom"bottom of the selected position
"left"left of the selected position
"right"right of the selected position
"topLeft"top left of the selected position
"topRight"top right of the selected position
"center"center of the selected position
data-topIntegerAdds an offset to the top
data-rightIntegerAdds an offset to the right
data-bottomIntegerAdds an offset to the bottom
data-leftIntegerAdds an offset to the left

Debugging tips

The configuration of a custom button can be tricky, you might end up with a buggy configuration. The combinations of the custom button’s position on your web page, the height of that web page, the custom button’s "data-orientation" setting, and its "data-position" setting can lead to situations in which the Chat Widget does not work. To avoid this, we have a few tips for you.

  1. Make sure that the chat works with the regular chat button.
  2. Edit one setting at a time. For instance, change the "data-position" and once this works fine, add more settings like "data-orientation".
  3. If you have trouble finding the Chat Widget on your page, use tools like jQuery to indentify the Widget’s position.
    $("#userlike-popup").offset()

    The Widget’s offset should be within the viewport of the browser window. If it isn’t, try changing the "data-position" and "data-orientation" settings.

Time for examples

To show the Widget at an exact position you can specify it using data-top, data-right, data-bottom and data-left. To get the result you're seeing in the image to the right, the tag would look like this:

<div id="userlikeCustomTab"
    data-top="100"
    data-left="100">
</div>

To show the Widget in the middle of the window, set the orientation to "center". This is a good solution if your chat button has a fixed position on your page.

<div id="userlikeCustomTab"
    data-orientation="center">
</div>

You can also show the Widget at the corner of the Window. Here we use "data-orientation" to let it appear on the top right.

<div id="userlikeCustomTab"
    data-orientation="topRight">
</div>

You can also add an offset to these orientations. Here we give the Widget some space using "data-top" and "data-right" so it does not stick right to the edges of the Window.

<div id="userlikeCustomTab"
    data-orientation="topRight"
    data-top="24"
    data-right="24">
</div>

If you'd like the Chat Widget to show close to your custom button, use the data-position attribute and set it to "button". Then you can define where the Widget should be displayed relative to the button, for example using data-orientation="left".

<div id="userlikeCustomTab"
    data-position="button"
    data-orientation="left">
</div>

When using "button" as the position, you can use the same orientation attributes to show the Widget relative to your button. Here we are using "bottomLeft" for data-orientation.

<div id="userlikeCustomTab"
    data-position="button"
    data-orientation="bottomLeft">
</div>

You can also use more detailed positions like "topLeft" or "topRight". Play around with the orientation values to see which one fits best for your custom button.

<div id="userlikeCustomTab"
    data-position="button"
    data-orientation="topLeft">
</div>

Custom button demo markup

How to hide your custom chat button when your team is offline

You need to ensure that the Chat Widget is already loaded before you add any callback handler. You can simply do this by defining a global callback function 'userlikeReady'. Learn more in our Custom Data Tutorial.

You can hide or change the chat button if your team is offline.

  1. In the Widget Editor, under "Chat" > "Behavior" > "Approach" > "Chat", select the option "Hide the chat button if offline". If you always want to hide the button outside your service times, regardless of whether Operators are available, also select "Hide the chat button outside of service time".

  2. Add a data attribute with a callback function handler.

    <div id="userlikeCustomTab" data-callback="userlike.userlikeButtonHandler"></div>

  3. Handle the desired button modification in the function callback.

How to display the incoming message badge

You can display the incoming message count in the custom button.

  1. Add a data attribute with a callback function handler.

    <div id="userlikeCustomTab" data-callback-badge="userlike.userlikeBadgeHandler"></div>

  2. Handle the display count in the function callback.

How to use two custom buttons on the same page

You can use a custom chat button and a secondary button within one page.

  1. Create your main custom chat button and assign the ID "userlikeCustomTab" to it.

  2. On the secondary custom button you need to call the chat start function in the click event handler.

    userlike.userlikeStartChat();