Articles in this section

How to Add Parameters to the Appointy Overlay Widget

You can use parameters with the Appointy Overlay Widget to open the booking flow with a specific service, staff member, category, or supported combination already selected.

In the current Overlay Widget code, parameters are passed through the extraParameter property.

Quick navigation

My Space / Agenda View → Quick Start Guide → Integrate on Your Website Now → Overlay Widget → Copy Code

Step 1: Open the Quick Start Guide

  1. Log in to your Appointy admin account.
  2. From My Space / Agenda View, locate the Quick Start Guide icon at the bottom-right of the screen.
  3. Click Quick Start Guide.

Step 2: Open the website integration options

In the Quick Start Guide, go to Preview your Booking Portal.

Click:

Integrate on Your Website Now

This opens your booking portal integration options.

Step 3: Select the Overlay Widget

The integration panel displays your booking portal along with the available website integration methods.

Select Overlay Widget.

You will see the current Overlay Widget code for your Appointy account.

Click Copy if you want to copy the complete widget code.

Step 4: Locate extraParameter in the widget code

The current Overlay Widget code contains the following configuration:

<script type="text/javascript">
    if (typeof(window.Appointy) === 'undefined') {
        window.Appointy = {};
    }

    window.Appointy.config = {
        business: 'graps',
        defaultTab: 'Schedule',
        extraParameter: '',
        buttonImg: '',
        modal: {
            height: '100%',
            width: '100%'
        },
        buttonAlign: "Right",
        buttonPosition: "40",
    };

    jQuery(document).ready(function() {
        jQuery("#bookAppointy").click(function(){
            jQuery("#app-widget-btn").click();
            return false;
        });
    });
</script>

<script
    type="text/javascript"
    src="https://cdn.appointy.com/web/blob-web/js/appointy-widget.js">
</script>

The line used for parameters is:

extraParameter: '',

Step 5: Add your parameter

Insert the required parameter string between the quotation marks.

For example:

extraParameter: 'sr=012345&cat=Sample Category Name',

In this example:

  • sr=012345 represents the service parameter
  • cat=Sample Category Name represents the service category parameter

The parameter values should correspond to the service, staff, category, or combination you want Appointy to preselect.

Your updated configuration would look like:

<script type="text/javascript">
    if (typeof(window.Appointy) === 'undefined') {
        window.Appointy = {};
    }

    window.Appointy.config = {
        business: 'graps',
        defaultTab: 'Schedule',
        extraParameter: 'sr=012345&cat=Sample Category Name',
        buttonImg: '',
        modal: {
            height: '100%',
            width: '100%'
        },
        buttonAlign: "Right",
        buttonPosition: "40",
    };

    jQuery(document).ready(function() {
        jQuery("#bookAppointy").click(function(){
            jQuery("#app-widget-btn").click();
            return false;
        });
    });
</script>

<script
    type="text/javascript"
    src="https://cdn.appointy.com/web/blob-web/js/appointy-widget.js">
</script>

Step 6: Add the widget code to your website

After adding the required parameter:

  1. Copy the complete Overlay Widget code.
  2. Paste it into the appropriate section of your website.
  3. Publish or update the page.
  4. Open the widget and test the booking flow.

The booking flow should open with the parameterized selection applied.

What does extraParameter do?

The extraParameter property passes additional booking parameters to the Appointy widget.

Without a parameter:

extraParameter: '',

the widget opens the normal booking flow.

With a parameter:

extraParameter: 'sr=012345&cat=Sample Category Name',

Appointy uses those values when opening the booking flow.

Important

Do not add the full Appointy booking URL inside extraParameter.

Use only the parameter portion.

For example:

Correct:

extraParameter: 'sr=012345&cat=Sample Category Name',

Rather than placing an entire booking URL in the field.

You’re right — the article should include FAQs. Add this section near the end, before the Zendesk settings:


Frequently Asked Questions

What is extraParameter in the Overlay Widget?

extraParameter is the configuration field used to pass supported booking parameters into the Overlay Widget.

For example:

extraParameter: 'sr=012345&cat=Sample Category Name',

This can be used to preselect supported booking options such as a service, category, staff member, or combination.

Where can I find the Overlay Widget code?

Go to:

My Space / Agenda View → Quick Start Guide → Integrate on Your Website Now → Overlay Widget

From there, you can view and copy the current Overlay Widget code.

Do I need to use the old AppointyExtraParameter variable?

No. The current Overlay Widget uses:

extraParameter: '',

inside:

window.Appointy.config

The older var AppointyExtraParameter method belongs to the previous widget implementation.

Can I preselect a specific service in the Overlay Widget?

Yes. Add the supported service parameter to extraParameter.

Example:

extraParameter: 'sr=012345',

Can I pass more than one parameter?

Yes. Supported parameters can be combined in the same string.

Example:

extraParameter: 'sr=012345&cat=Sample Category Name',

Can I preselect a staff member?

Yes, if you have the required supported staff parameter. Add it to the extraParameter field.

Should I add the full booking URL to extraParameter?

No. Add only the parameter portion, not the complete booking URL.

For example:

extraParameter: 'sr=012345&cat=Sample Category Name',

Where do I get the parameter values?

Use the parameterized booking options available in Appointy to identify the service, staff, category, or supported combination you want to use.

Do I need to change the Appointy widget JavaScript URL?

No. Keep the current widget script unchanged:

https://cdn.appointy.com/web/blob-web/js/appointy-widget.js

What should I do after adding the parameter?

Copy the complete updated widget code to your website, publish the page, and test the Overlay Widget to confirm that the expected service, staff, category, or combination is preselected.

What if the parameter does not work?

Check that:

  • The parameter name is correct
  • The parameter value is valid
  • Multiple parameters are joined correctly with &
  • The value has been added inside extraParameter
  • The rest of the Overlay Widget code has not been modified incorrectly

If you still need help, contact contact@appointy.com.