The booking form allows your customers to schedule a Hi Touch session ahead of time, provided you have set up your availability and linked your Hi Touch account with a Google or Outlook calendar.
To install, go back to the template editor at Online Store > Themes > Actions > Edit Code.
Under the Templates column, click Add a New Template, then:
- In the dropdown menu called “Create a new template for”, select “page”.
- For Template Type, select “liquid”.
- Then under File Name, give it an appropriate name, such as page.hitouch.liquid.
- Click Create Template.
Once created, add the following code into the template:
<style>
.ht-booking-wrapper {
height: 620px;
width: 100%;
max-width: 900px;
margin: auto;
}
@media screen and (max-width: 640px) {
.ht-booking-wrapper {
height: 1005px;
}
}
</style>
<div class="ht-booking-wrapper">
<iframe id="zc-embed" width="100%" height="100%" style="height: inherit; width: inherit" src="https://video.zipcan.com/_CHATSPACE_TOKEN_/booking" frameborder="0" allow="autoplay; picture-in-picture; camera; microphone; display-capture" allowfullscreen></iframe>
<script crossorigin="anonymous" async src="https://api.zipcan.com/iscript.js"></script>
</div>
Be sure to replace the part _CHATSPACE_TOKEN_ with the ID token given to you. Contact us if you don't have it.
Your template may be pre-populated with some code already. If so, you will need to either remove that code or place this code inside the pre-populated code. We recommend consulting your web master for this.
Note: Please do not modify any of the styles or HTML with this code. If you want to include any additional styles, you can do so by wrapping ht-booking-wrapper with another <div> and style it instead. Additionally, you can contact us if you want the font or colors changed in the booking form.
This code will respond to mobile screen sizes, but additional development may be required for appropriate formatting on your site, especially if this page is shared with other content or containers (e.g. header, footer, sidebar, etc…).