Add ExpertBox side widget to your website

Time to go live! One way you can start getting appointments is by installing the ExpertBox side widget on your website. 

A side widget is a convenient floating button in the corner of your website that launches a booking pop-up form. It can also be added as a link anywhere on your website, e.g. as a menu item. You can read about other ExpertBox booking channels here.

Tip: If you don’t have a widget yet, first read this guide to learn how to create one.

Choose how you want to integrate your side widget

There are three ways to add an ExpertBox side widget to your website:

  1. As a widget button — a floating button in the corner of your website that opens a booking pop-up when clicked
  2. As a widget link — a link that can be placed as a menu item or anywhere on your website and opens a booking pop-up when clicked
  3. As both a widget button and link

Add a widget button

  1. While editing your widget, go to the Integrations tab.
  2. In the Side widget section, choose the Widget button option.

  1. Copy the code from the Copy widget code field.

  1. Paste the code to your website’s editor.
  2. Save the changes.
  3. Activate the widget and go live!

Tip: If you don’t want to do this yourself, you can forward the code to your system administrator. Just enter their email address and click Send instructions.

Add a widget link

  1. While editing your widget, go to the Integrations tab.
  2. In the Side widget section, choose the Widget link option.

  1. Copy the code from the Copy widget code field.

  1. Paste the code to your website’s editor.
  2. Save the changes.
  3. Go back to your widget’s Integrations tab on ExpertBox and set the Custom launch selector code.

Tip: If you want to link a booking widget to an element on your website, make sure your Custom launcher selector starts with a hash/pound sign (e.g. #id-go-consulted-widget-trigger). To link it to all elements with a specific class, it should start with a dot/period (e.g. .id-go-consulted-widget-trigger).

  1. Copy the Custom launch selector code.
  2. In your website editor, add the widget id or class to the element that will open the booking form when clicked.

For example, if you want the booking panel to open when someone clicks on the “Book an appointment” heading on your website, you need to find this element in the HTML code first: <h1>Book an appointment</h1>

Then add the widget id or class from the Custom launcher selector within the tag. As a result, your code may look like this:

<h1 id="id-go-consulted-widget-trigger">Book an appointment</h1>

or this: 

<h1 class="id-go-consulted-widget-trigger">Book an appointment</h1>

  1. Save the changes.
  2. Activate the widget and go live!

Tip: If you don't want to do this yourself, you can forward the code to your system administrator. Just enter their email address and click Send instructions.

Add both widget button and link

  1. While editing your widget, go to the Integrations tab.
  2. In the Side widget section, choose Both button & link.

  1. Copy the code from the Copy widget code field.

  1. Paste the code to your website’s editor.
  2. Save the changes.
  3. Go back to your widget’s Integrations tab on ExpertBox and set the Custom launch selector code.

Tip: If you want to link a booking widget to an element on your website, make sure your Custom launcher selector starts with a hash/pound sign (e.g. #id-go-consulted-widget-trigger). To link it to all elements with a specific class, it should start with a dot/period (e.g. .id-go-consulted-widget-trigger).

  1. Copy the Custom launch selector code.
  2. In your website editor, add the widget id or class to the element that will open the booking form when clicked.

For example, if you want the booking panel to open when someone clicks on the “Book an appointment” heading on your website, you first need to find this element in the HTML code:
<h1>Book an appointment</h1>

Then add the widget id or class from the Custom launcher selector within the tag. As a result, your code may look like this: 

<h1 id="id-go-consulted-widget-trigger">Book an appointment</h1> 

or this: 

<h1 class="id-go-consulted-widget-trigger">Book an appointment</h1>

  1. Save the changes.
  2. Activate the widget and go live! 

Tip: If you don’t want to do this yourself, you can forward the code to your system administrator. Just enter their email address and click Send instructions.

Activate the widget

Once you’ve finished setting up your widget, make sure you activate it to make it visible to clients. Here’s how:

  1. When you’re editing your widget, go to the Widget settings tab.
  2. Click the Widget status toggle in the Name & status section.
  3. Click Save and go live!

What’s next?