Potential Ways You Could Enhance Your Guest Details Page

Hi, Everyone!

While we continue to collect feedback around the overall guest experience in hopes of having a wealth of it for when we do get to it as a project, I wanted to pop on here and share a couple of tips that might help your experience as well as your customers' experience with the Guest Details page.

There are a few changes you could apply:

1. Rephrasing the verbiage using Checkfront translations to better suit your business and intentions with the Guest Form.

2. Enhancing calls to action such as 'add yourself as a guest here' by making them appear more like buttons

3. Increasing the font size and darkening the text that is most important for the booker to read.

4. Removing the option to 'continue' to the receipt before filling the guest forms.

*This is not completely preventative but it should help deter that from happening since most bookers should want to get to their receipt before leaving the booking process*

I've created what I thought would be a 'quick video' here but turns out it's ~10 mins 😅 but I think it could be helpful regardless so here are some timestamps in case you don't want to spend the time looking for what you're most interested in.

1:02 - Disclaimer that we do not support maintenance for custom code

1:20 - How to change the verbiage

2:35 - Enhancing the 'add yourself as a guest' text

3:45 - Adding additional style changes to the booker instructions

5:54 - Prevent bookers from bypassing the guest form so easily

Below is the example CSS I use in the video. Please note that custom CSS applies to the Customer Booking Page and not the Staff Booking Details Page.

/***CHANGES 'If you are participating' font****/

#add-booker-as-guest-container {
font-size: 20px;
color: black;
}
/***CHANGES 'add yourself as a guest' to more of a button style****/

#add-booker-as-guest-container #add-booker-as-guest a{
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
background: #a5e0b4;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

/*** ADDS HOVER EFFECT to 'add yourself as a guest' button style****/

#add-booker-as-guest-container #add-booker-as-guest a:hover {
background: #96c9a7;
text-decoration: none;
}

/***ADDS MARGIN between 'add guest' and 'add yourself as a guest'****/

#add-booker-as-guest-container {
font-size: 20px;
color: black;
margin-bottom: 35px;
}

/***REMOVES 'continue' button if attempting to bypass to receipt without filling'****/

.confirm.btn.btn-lg.btn-info {
display: none !important;
}

I am sure there are other improvements you could make so if anyone else has tips or tricks with this please feel free to add your insight here.

Cheers!

Eric Parkinson

May 26, 2022 11:03

Hi Brittany,

We are thinking of using the Checkfront Translations file to simply remove the line that states "Alternatively, you can continue to your receipt and complete this later" along with links to the receipt or to share the link. This would also remove the "Continue to receipt?" modal window. And, instead, have text that states:

Thanks for booking with {$COMPANY_NAME}! Guest details and signing a waiver document are required for this booking.

Please complete these now:

-----

With the awareness that a user could always navigate away from this page without doing anything else, is there any downside to simply suppressing outgoing links and the modal window? Any functional repercussions in doing that? Or, would it be more of an issue of how to get a user back if they opted not to fill out guest details or waiver signing?

Thanks for these tips.

May 27, 2022 13:16

P.S. - I tried testing to see if I could place a link to the receipt once guest info and waivers were signed by using translation change on the Success message but the link did not seem to work? Not sure if they do not work in those sectors of the page or whether I did it wrong. See below.

Thanks.

Potential Ways You Could Enhance Your Guest Details Page

Comments

Didn't find what you were looking for?