Install booking forms with the widget script

For websites other than WordPress, install the Viking booking widget by adding one script to your website.

Once the widget is installed, you can link normal website buttons and text links to a Booking form URL. Viking then opens the correct booking form in a popup.

Before you start

You need access to the website code or a place in your website builder where you can add custom code.

If you use WordPress, see Install booking forms on WordPress instead.

Install the widget script

Add this script near the end of your website, just before the closing </body> tag:

<script src="https://app.vikingbookings.com/widget/v2/widget.js"></script>

The script only needs to be installed once.

After that, booking form links on your website can open through the Viking widget.

Link a website button to a booking form

Go to Settings → Booking Forms.

Open the booking form you want to use and copy its Booking form URL.

Then add that URL to a normal button or text link on your website.

For example:

• Book now
• Book a lesson
• Reserve your spot

When a visitor clicks the link, Viking opens that booking form in a popup.

If you use a booking form group, you can also link to the group overview page or directly to a specific form within the group.

For more information, see Use booking form links.

Add a floating booking button

You can also add a floating booking button that stays visible in one of the bottom corners of your website.

Add the widget settings before the Viking widget script:

<script type="text/javascript">
window.vikingWidgetSettings = {
  button_form_url: "ADD YOUR BOOKING FORM URL HERE",
  button_alignment: "right",
  button_horizontal_padding: 10,
  button_vertical_padding: 10,
  style_color: "#000000"
};
</script>

<script src="https://app.vikingbookings.com/widget/v2/widget.js"></script>

Replace the value of button_form_url with the Booking form URL you want the floating button to open.

You can also configure:

• button_alignment — left or right;
• button_horizontal_padding — distance from the side of the screen;
• button_vertical_padding — distance from the bottom of the screen;
• style_color — button color.

The button appears in one of the bottom corners of the customer's website.

Configure the floating button in Viking

Some floating button settings are configured inside the booking form itself, including:

• Button label
• Button CTA
• Alignment on mobile

See Set up a booking form for these settings.

Test the installation

1. Open the website.
2. Click a button or link connected to a Booking form URL.
3. Check that the correct booking form opens in a popup.
4. If you use the floating button, check that it appears in the correct corner.
5. Test the setup on both desktop and mobile.

Related articles

• Use booking form links
• Set up a booking form
• Set up a booking form group
• Install booking forms on WordPress