Create & Integrate Booking Buttons To Your Website

Created by Julien Pauthier, Modified on Sun, 26 Feb 2023 at 09:44 PM by Julien Pauthier

TABLE OF CONTENTS

Creating, Publishing & Integrating Scheduling Widget Buttons

Create a button

To create a booking button, navigate to the Installation page, on this page inside the box titled "Install Online Scheduling" click the button to the right that says Create New, from there name the button, select which company the button is for (or create one if you haven't yet), and click the button in the upper right corner that says Add.

The installation Page

Once the button is created, it will be displayed on the Installation page. Click the Install button to access various integrations:

Note: This document will focus on Online Scheduling, but the process remains the same for the other button types.

This will open a popup window containing pre-generated code ready to be copied and pasted. Here you can see that the Online Scheduling button can be published to a website using HTML or and iFrame, Facebook page, Direct URL, email signature or QR code.

Publishing to a Website

To publish your Online Scheduling button to your website, select Publish beside the button you have created and copy the Website(HTML) or iFrame code.

Pop-in integration

The Website (HTML) code will display the icon for the Online Scheduling button that was chosen when creating the button, and display your booking widget as an overlay on the page. This integration is responsive: on a mobile device, the scheduling interface will go fullscreen to adapt to the limited screensize.

Here is how your scheduling widget will be shown, when the popin button is clicked:

Note: You can also integrate the button with a picture, an icon or a CSS button of your own, as well as a floating button as shown here.

iFrame integration

The iFrame code will display your booking widget embedded within the web page, avoiding the need for your customers to click a button. Your website must take into account the screen size of the user to display the iframe nicely on a handheld device.

Direct URL (or minisite)

Agendize automatically generates a mini site for the company at https://app.agendize.com/book/{companyId}, that adapts to mobile displays automatically (responsive). This can be helpful if you want to integrate a “Book an appointment” link in an email, for example (the previous integrations are not possible in an email because they use JavaScript).

Here’s how it looks on a browser:

Publishing to Facebook

To publish your button to Facebook, you must first have a Facebook business page. To set one up, please follow the steps outlined in this article. Within your account, navigate to Installation and select Publish beside your Online Scheduling button. This will open the popup with pre generated code from the previous section. Click "click here" to redirect to your Facebook page.

Click the Add online scheduling to your facebook page button. On the next page select which Facebook page you would like to add online scheduling to and then click Add Page Tab. After that, from your Facebook, go to your company's Facebook page and find the Schedule Online tab on the left, sign in with your account credentials, and from the dropdown menu select which company you would like the to create bookings for. You will now see the Online Scheduling Widget within your Facebook business page. If you would like to change the order of your tabs, select Manage Tabs.

Publishing to the Facebook Mobile App

To publish a booking button on Facebook Mobile App, navigate to Installation and select Install beside your Online Scheduling button and copy the Direct URL. Next Navigate to your Facebook business page within the Facebook App tap Edit Page and select Add a button.

On the next screen select Book Now and on the next screen paste the Direct URL for your booking button into the section titled "Link to Website or App".

When a customer is viewing your Facebook page on a mobile device, they will now see the Book Now button available.

Email Marketing Campaign

If you use the Email Marketing feature on your account, navigate to Installation, click Install beside the Online Scheduling button, and copy the Email code. Go to the Contacts portion of the platform, select Message Templates located on the left sidebar, choose a template of your choice or create a new template, and paste the email code that was copied earlier.

Select Save, now when you open the template again you will see the Online Scheduling button within the template.

Email Signature

Navigate to Installation, select Install beside your Online Scheduling button, and copy the Direct URL. Open a new browser tab or window and navigate to your email account and find the Signature or Signature Editor section in your settings. Once there, add an image to the signature to represent you button and then, using your secondary click, link the direct URL copied earlier to that image.

Publishing to Twitter

Navigate to Installation, select Install beside your Online Scheduling button, and copy the Direct URL. Go to a URL shortener of your choice and shorten the direct URL copied earlier. Now you can link your scheduling button in a Tweet without consuming precious characters!

Publishing to Google My Business

Please refer to our specific article concerning Google My Business.

GET Parameters & Javascript Variables

Pop-in, iframe and minisite URL integrations can be configured through GET or JavaScript parameters: please have a look at the full list of GET/JS parameters for your widget integration.