Skip to main content
Important Support System Updates Are Underway | Learn More...

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Embedded Forms with Calendar Bookings

  • Updated:

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 (Uniform Resource Locator) 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 (Content Delivery Network) 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

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.