The following code is for adding Uzeli appointment app in your website. This must be installed in a valid domain in order for the appointment integration to work. If you need to add multiple domains, let us know at [email protected].
You can send the link to these instructions to your developer without having to give them access to your dashboard. Click on the button below, or copy the URL manually.
</body> tag
<script type="text/javascript" src="https://book.appt.cm/js/gzbooker.js"></script>
<script type="text/javascript" src="https://book.appt.cm/remote/api/booking/config/::APPID::?callback=GZBOOKER.configure"></script>
<script type="text/javascript" src="https://widgets.growthzilla.com/pay/gzpay.js"></script>
<script type="text/javascript" src="https://widgets.growthzilla.com/gc/gc.js"></script>
If you don't pick your colors, default colors will be used. But you can change here to match your website colors.
<script type="text/javascript">
(function (w) {
//Appointment Book Now Button
if (w.GZBOOKER) {
w.GZBOOKER.init({
businessId: "::APPID::",
buttonBackground: "::BUTTONBG::",
buttonColor: "::BUTTONFG::"
});
}
//Gift Card Balance Widget
if (w && w.GZGC) {
w.GZGC.init("giftcardwidgetholder", "::GCCODE::", {
overlayModal: true,
defaultButton: true
});
}
//Buy Now Button
if(w && w.gzPAYx){
w.gzPAYx.init("::BIZPIN::", "::BIZWEBNAME::");
}
}(window));
</script>
In the following code, replace {{your_button_id_1}} with the ID of the button on your page. For each button, repeat the code section as suggested in the code.
<script type="text/javascript">
(function (w) {
if (w.GZBOOKER) {
w.GZBOOKER.init({
businessId: "::APPID::",
disableDefaultButton: true
});
}
// For each button in your web page, repeat the following code replacing {{your_button_id_1}} with the ID of each button
// Start of BUTTON CODE
var el = document.getElementById("{{your_button_id_1}}");
if(el){
el.addEventListener("click", function(e){
e.preventDefault();
w.GZBOOKER.show();
});
}
// End of BUTTON CODE
}(window));
</script>
Use the following code instead of #3 or #4 to add a multi-location menu with the button
<script type="text/javascript">
(function (w) {
if (w.GZBOOKER) {
w.GZBOOKER.init({
stores: ::STORES::,
businessId: "::APPID::",
buttonBackground: "::BUTTONBG::",
buttonColor: "::BUTTONFG::"
});
}
}(window));
</script>
If you would like the appointment to open from your own menu items or custom button, use the following code instead. This assumes that your buttons are named mybutton1, mybutton2 and so on for each of your location.
if(document.getElementById("::BUTTONID::")){
document.getElementById("::BUTTONID::").addEventListener("click", function(e){
e.preventDefault();
w.GZBOOKER.switchApp("::APPID::");
});
}
The widget fires events when an appointment is booked or when the widget is closed without booking. By attaching listeners for these events on your website, you can add enhanced capabilities to your website (for example take the cusotmer to a different page after booking).
The callbacks can be passed as option to the init() method as follows:
function yourBookingCallbackFunction(){
// do something when appointment is booked
window.location.href = "https://growthzilla.com/pricing";
// track booking completion using GTM
// show a thank you popup window
}
function yourCloseCallbackFunction(count){
if(count < 1){
// do something when widget is closed without booking
window.location.href = "https://growthzilla.com/about-us"
// track close using GTM
// show a promotion window or discount coupon page etc.
}
}
w.GZBOOKER.init({
businessId:"...",
buttonBackground: "...",
buttonColor: "...",
bookingCallback: yourBookingCallbackFunction,
closeCallback: yourCloseCallbackFunction
});In order to track visitors' conversion within appointment widget, you will need to track button clicks using your preferred analytics tool. This will mark the "start" of visitor's journey inside the widget. Next, you can capture custom events from inside the callbacks discussed above, or redirect your visitor's to custom landing pages for each event. This will mark the "end" of the visitor's journey inside the widget. Here are some useful links for tracking button clicks using Google Tag Manager:
Track Button Click Event
Lovesdata Guide to Button Tracking using GTM
If you are using the widget's default button, the button ID is gz-booking-button.
In order to find out if a visitor booked appointment using your Facebook's Book Now button, we suggest you link the button to your own website with the appointment widget open instead of directly linking to the appointment widget. This can be done by passing a gzauto=1 query parameter to the website where the widget is embedded. For example, https://elitesalon.us?gzauto=1 will automatically show the appointment widget on your website and you can easily track conversion by looking at the visits to this page.
To add the custom code to your Wordpress website, use a header/footer script plugin of some kind. Here's one for example .
Then follow the steps above to add the code under "Footer" section provided by the plugin. By doing this, updating template will not affect the integration.
If you like to use menu items as the buttons for appointment, you will need to find the ID of the menu item and use it in the code in Step #4.
In order to add integration code to your Wix website, you need to use the Tracking & Analytics app. This requires a paid subscription of Wix.
Here are step by step instructions from Wix documentation .
Several other integration options are available. Please contact us at [email protected] for support.
This option allows you to allow your customers to check-in online from your website before walking in. The check-in button will display approximate wait times for next service.
This option allows you to provide book now buttons specific to a single artists/barber/stylist, which they can put on their own Facebook page or website.
You can find appropriate buttons for triggering staff specific appointments under staff details on your account dashboard.
Example:
<button style="border: 1px solid #2196F3;background: #03A9F4;border-radius: 4px;color: #ffffff;padding: 3px 6px;" onclick="GZBOOKER.openPrefilled('2f0c5046-e60f-4a27-b3ea-518cb8978e34', 0, 10)">📅 Book with Bina</button>This option allows you to provide book now buttons specific to a single service. For example, "Book Men's Haircut" or "Book Brow Shaping" buttons will take customers directly to artist selection for those services.
You can find appropriate buttons for triggering service specific appointments under service details on your account dashboard.
Example:
<button style="border: 1px solid #2196F3;background: #03A9F4;border-radius: 4px;color: #ffffff;padding: 3px 6px;" onclick="GZBOOKER.openPrefilled('2f0c5046-e60f-4a27-b3ea-518cb8978e34', 37, 0)">📅 Book Full Face</button>This option allows you to provide book now buttons specific to a single category. For example, "Book Massage" or "Book Haircut" buttons will open the widget with those categories pre-selected.
You can find appropriate buttons for triggering category specific appointments under service details on your account dashboard.
Example:
<button style="border: 1px solid #2196F3;background: #03A9F4;border-radius: 4px;color: #ffffff;padding: 3px 6px;" onclick="GZBOOKER.openTab('2f0c5046-e60f-4a27-b3ea-518cb8978e34', 9)">📅 Book Henna</button>This option allows you to provide buy now buttons for selling your services/gift cards/packages online on your website.
This requires you to have integrated Stripe with Uzeli application. You can find your "Buy Now" buttons under service details on your account dashboard.
Example:
<button style="border: 1px solid #2196F3;background: #03A9F4;border-radius: 4px;color: #ffffff;padding: 3px 6px;" onclick="gzPAYx.buy(37, 'Full Face', 25, 1, 0, true)">💳 Buy Full Face</button>
Disable default button, enable overlay in the options: {overlayModal: true, defaultButton: false}
Open the widget from your button: GZGC.showModal().
Example:
<button class="btn btn-primary" onclick="GZGC.showModal()">Check Balance</button>
Disable default button and overlay in the options: {overlayModal: false, defaultButton: false}.
Create a placeholder for the widget in your page and give it an id id="giftcardwidgetholder".
Example:
<div id="giftcardwidgetholder"></div>