Embedded Forms with Calendar Bookings

Prev Next

This article covers how to embed a form with a Calendar Booking workflow event into your website.

Important Note

The scripts necessary for this function will only be generated if a Calendar Booking workflow event has been configured on the form.

Instructions

  1. Sign in to your site

  2. Use the website embed script to embed your form onto the desired page on your website if you have not already The Form Embed Script Copy to Clipboard button.

    • When you add the code to your website, add the URL of the page you are embedding the code in between the quote marks (' ') of both the submissionRedirectUrl and the cancelRedirectUrl lines The Submission Redirect and Cancel Redirect URL lines within the Form Embed Script section.

  3. Navigate back to the Summary tab of the form, then click the embed button under the Form Link The Forms Summary tab and an Embed Form button.

  4. Scroll past the Form Embed Script to find the 3 Booking Scripts needed to set up the calendar booking process The Calendar Bookings section of the Generate Form CDN Script modal.

    • Calendar Booking Embed Script: The URL to redirect the user to for displaying a calendar booking page

    • Reschedule Booking Embed Script: The URL to redirect the user to display a calendar booking reschedule page

    • Cancel Booking Embed Script (not pictured): The URL to redirect the user to display a calendar booking cancel page

    Note: These scripts will only display if a Calendar Booking workflow event has been configured on the form.

  5. Scroll to the Calendar Booking Embed Script section and click Copy to clipboard (clipboard icon) The Calendar Booking Embed Script Copy to Clipboard button.

  6. Paste the Calendar Booking Embed script onto a page on your website other than the one with the Form Embed script, then copy the URL of the page you are embedding the code in and store it somewhere temporarily The Calendar Booking script copied onto an example webpage.

  7. Navigate back to the Generate Form CDN Script window within Process Automation and Digital Services The Generate Form CDN Script modal.

  8. Scroll to the Reschedule Booking Embed Script section and click Copy to clipboard (clipboard icon) to copy the Reschedule Booking Embed Script The Reschedule Booking Embed Script Copy to Clipboard button.

  9. Paste the Reschedule Booking Embed script onto a page on your website other than the ones with the Form Embed and Calendar Booking Embed scripts, then copy the URL of the page you are embedding the code in and store it somewhere temporarily The Reschedule Booking script copied onto an example webpage.

  10. Navigate back to the Generate Form CDN Script window within Process Automation and Digital Services The Generate Form CDN Script modal.

  11. Scroll to the Cancel Booking Embed Script section and click Copy to clipboard (clipboard icon) The Cancel Booking Embed Script Copy to Clipboard button.

  12. Paste the Cancel Booking Embed script onto a page on your website other than the ones with the Form Embed and Calendar and Reschedule Booking Embed scripts, then copy the URL of the page you are embedding the code in and store it somewhere temporarily The Cancel Booking script copied onto an example webpage.

  13. Navigate back to the webpage that you copied the Form Embed Script to in step 2 An example webpage with the Form Embed script copied onto it.

  14. Locate the calendarBookingFormUrl, calendarBookingRescheduleFormUrl, and calendarBookingCancelFormUrl lines The Calendar. Reschedule, and Cancel Booking Embed Script lines on an example webpage.

  15. Paste the URLs you copied in step 6, step 9, and step 12 in between the quote marks (' ') on the corresponding lines The calendarBookingFormUrl, calendarBookingRescheduleFormUrl, and calendarBookingCancelFormUrl lines on an example webpage.

  16. Once configured, users will be able to complete forms and be redirected to your specified web pages to complete the calendar booking or reschedule or cancel bookings