With the Sera Widget on your website, you can drive search engine optimization (SEO) and allow your customers to book on your website! Through the widget, new and returning customers schedule appointments based on the service needed while selecting from available times that work with their schedule. Change the “companyID” in the script to match your company’s ID. Your company ID can be found before the .sera.tech in your admin portal URL.
For example, if the domain you login to Sera at is https://abcplumbing.sera.tech/admins/login, abcplumbing would be your companyID
Adding widget to your site
Include the following script tags into the <head> of your document/page:
<!-- SERA WIDGETS SCRIPTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"
integrity="sha256-aVBGxeTxC3EKdKExZpeda6waSlxIReqV4pi0nblYO7o="
crossorigin="anonymous"
></script>
<script src="https://cdn.sera.tech/widgets/v1/schedule/schedule-appointment.min.js"></script>
<!-- END SERA WIDGETS SCRIPTS --
Include the following tag into the body of your page where you would like the widget to appear:
<schedule-appointment tenant="companyID"></schedule-appointment>
Be sure to replace "companyID" with your own companyID but leave the quotation marks,
Returning Customers Button
If you would like a second button for Returning Customers to access their Customer Portal, use the following link:
companyID.schedule.online
Again, you will replace companyID with your own.
Tracking Conversions
Our scheduling widget will fire predefined events as users interact with it. These events can be sent directly to your google tag manager account by adding a “gtag-id” attribute to the schedule-appointment tag. Be sure to replace
<schedule-appointment tenant="companyID" gtag-id="YOUR_GTAG_ID" ></schedule-appointment>
The widget will fire "page views" for each step of the process:
- /step_1
- /step_2
- /confirmation
- /area_not_covered
- /no_appointments_available
Events:
- Appointment Scheduled
- event_category = Conversion
- Fired after a user successfully books an appointment and lands on the confirmation screen of the widget
- Area Not Covered
- event_category = Interested Customer
- Fired after a users information is captured but their zip code is not in the company's coverage area
- No Appointments Available
- event_category = Interested Customer
- Fired after a user requests availability for a given service category and there are no available times to select
Add Custom Conversion Events
We also support adding custom conversion events using the “gtag-conversion-events” attribute which accepts an array of Google Analytic events that the widget will fire after a successful conversion:
<schedule-appointment tenant="companyID" gtag-id="YOUR_GTAG_ID" gtag-conversion-events="[{'event_name':'conversion','event_params':{'send_to':'YOUR_TRACKING_ID'}]" ></schedule-appointment>
See more on Google Analytics events