Customize your appointment booking button

Scheduling Widget Integration · Integration to your website

Finding your booking button URL

With Agendize, you can deploy your product through an appointment booking button. The URL of this button is available from the Installation > All buttons tab. Choose your button and click Install:

Next, we will look at the Website (HTML) URL: 

You can test this button on a code testing site such as codepen.io: 

Customizing the button

First, within the <img /> tag, you can use the src attribute to change your button image to match your organization's theme. There is also the onclick attribute, which contains an openScheduling() function holding the encrypted ID of your location as a string. It works just as well if you use the ID or the external ID of your location.

Example: onclick="openScheduling('agendize')"

Next, let's look at the JavaScript content of the script tag, and more specifically at the scheduling object. This is where you define the parameters used to build your widget URL.

Some basic default parameters are already present. The most important ones are: 

server: the base URI of your widget

button: your button ID (see the Reports tab)

lang: the widget display language (defaults to the user's language if this parameter is not set)

 You can also add the following parameters: 

service: service ID or service external ID

staff: staff member ID or staff member external ID

source: source of the booking

date: forces the widget to display from a specific date (yyyy-mm-dd)

You can therefore use the following combination: 

<img id="scheduling-8U5UaHGPgEZXwJjZcXUcFSU5fR03rfQHEg3zsdgVM40=" src="//france.agendize.com/web/img/scheduling_fr.gif" onclick="openScheduling('agendize')" style="cursor : pointer; border: 0" />
<script type="text/javascript">
  var scheduling = {
    server: 'france.agendize.com',
    version: 'v3',
    button: '1415848988431281',
    lang: 'fr',
    service: '1016582233232322',
    staff: '2016503598427407',
    date: '2023-02-27'
  };
</script>
<script type="text/javascript" src="https://france.agendize.com/web/scheduling.js"></script>

As with standard URL building, you can configure your button as you wish.

Learn more: Customize your appointment booking button

Prefilling fields

If you want to send this booking button to a specific customer, you can also prefill the widget fields to make their booking flow easier.

First, identify the widget fields to prefill in the Console tab, then Settings > Widget > Widget fields. In this example, we will use the last name, first name, email and phone number.

To insert these fields in the URL, add the following parameters: 

firstname=customer-first-name

lastname=customer-last-name

email=customer-email

phone=phone-number

Going back to our previous code, we now have: 

<img id="scheduling-8U5UaHGPgEZXwJjZcXUcFSU5fR03rfQHEg3zsdgVM40=" src="//france.agendize.com/web/img/scheduling_fr.gif" onclick="openScheduling('agendize')" style="cursor : pointer; border: 0" />
<script type="text/javascript">
  var scheduling = {
    server: 'france.agendize.com',
    version: 'v3',
    button: '1415848988431281',
    lang: 'fr',
    service: '1016582233232322',
    staff: '2016503598427407',
    date: '2023-02-27',
    firstname: 'James',
    lastname: 'Tibérius Kirk',
    email: 'j.tiberius@agendize.org',
    phone: '0102030405'
  };
</script>
<script type="text/javascript" src="https://france.agendize.com/web/scheduling.js"></script>

At the end of the flow, your customer only needs to confirm or move straight on to the next step of the form.

Additional fields

How do you prefill custom fields?

First, open the edit screen of the field in question. For example, we will edit the Job / Fonction field of our widget. Then we assign it an external key named job.

This external key lets us reference the field in our code as a key to which we assign a value. In the code below, see the job attribute added last:

<img id="scheduling-8U5UaHGPgEZXwJjZcXUcFSU5fR03rfQHEg3zsdgVM40=" src="//france.agendize.com/web/img/scheduling_fr.gif" onclick="openScheduling('agendize')" style="cursor : pointer; border: 0" />
<script type="text/javascript">
  var scheduling = {
    server: 'france.agendize.com',
    version: 'v3',
    button: '1415848988431281',
    lang: 'fr',
    service: '1016582233232322',
    staff: '2016503598427407',
    date: '2023-02-27',
    firstname: 'James',
    lastname: 'Tibérius Kirk',
    email: 'j.tiberius@agendize.org',
    phone: '0102030405',
    job: 'Support'
  };
</script>
<script type="text/javascript" src="https://france.agendize.com/web/scheduling.js"></script>

Our Job / Fonction field is now prefilled. You can add the other fields the same way.

You now have all the tools you need to customize your users' journey, from the booking button to the appointment itself.