1. Home
  2. Account Management
  3. Adding a booking widget or a chatbot to your website 

Adding a booking widget or a chatbot to your website 

Have leads or customers schedule appointments directly on your website by embedding your booking widget or chatbot on it.

  • A booking widget adds an appointment scheduling section to your site. Leads can book through it just as they would if they visited your appointment page.
  • A booking chatbot appears to all of your website visitors and allows them to schedule appointments with you.
  • You can also share an appointment page via a direct link – through email or social media.

Get the code

The code for embedding your booking widget or chatbot is HTML code.

To get the code:

  1. In Appointments, click the Share button on your chosen appointment page.
  2. In the Booking Widget or Booking Chatbot sections, click on the code in the text box – it will automatically copy the code.
  3. On your website, locate your desired page and paste the code where you want it to show up.

Customize the booking widget/ booking chatbot color

To change the color of the booking widget or chatbot:

  1. In Appointments, click the Share button on your chosen appointment page.
  2. In the Booking Widget or Booking Chatbot sections, use the Color dropdown menu to choose a color, its place is right next to the text “Color: “.
  3. Once you’ve chosen your color, click on the code in the text box – it will automatically copy the code.
  4. On your website, locate your desired page and paste the code where you want it to show up.

Add the booking widget or chatbot to your WordPress site

If you have a WordPress website:

  1. In your WordPress Dashboard, click on Posts or Pages.
  2. Find your desired page or post and click Edit.
  3. In the text editor, click the + sign and add a Custom HTML block.
  4. Paste the code in the Custom HTML block.
  5. Preview your page to see the changes.
  6. Once you’re done, press the Publish or Update button.

Other website builders

1&1

Embed your booking widget in a Widget/HTML element. You may need to preview your booking widget or chatbot to prompt 1&1 to display it on mobile devices, disable the option to only display optimized content on smartphones and tablets.

Drupal

Change your text format to Full HTML to add custom HTML, then add the booking widget or chatbot code.

GoDaddy

Follow GoDaddy’s instructions for adding custom HTML to add the booking widget or chatbot code.

Leadpages

Use the Leadpages HTML widget to add the booking widget or chatbot code.

Shopify

Use the HTML editor to add the booking widget or chatbot code. Make sure to save before trying to view your page.

Squarespace

To add a booking widget or chatbot on your Squarespace site, paste the code into a code block.

Vistaprint/Web.com

Use the custom HTML feature to add the booking widget or chatbot code to your website.

Weebly

Drag the Weebly Embed Code element onto your web page, then add the booking widget or chatbot code.

Wix

Follow Wix’s steps for adding the HTML element to your site. When you’re ready to add code to the HTML element, use the booking widget or chatbot code and paste it onto your element.

If the frame holding your booking widget or chatbot is shorter than the widget itself, some mobile devices may experience glitches when booking. To prevent this, go into the Wix mobile editor and drag the bottom of the embedded booking widget frame down until the entire booking widget is visible. Make sure the bottom of the booking widget is visible through all of the booking process.

Updated on May 15, 2022

Was this article helpful?

Related Articles