Support Centre

Multi Activity Booking Flow UI For Online Sales

The purpose of this feature is to provide a fast, design-focussed user interface for online sales, which you can update with your brand easily

Step-by-Step Instructions

Creating Your Booking Site

Log in to your Salesforce environment and click the Setup cog
 
 
In the Quick Find field type ‘All Sites’
 
 
Select ‘All Sites’ and the click ‘New’
 
 
From the options, choose ‘Build Your Own (Aura)
 
 
Click “Get Started”
 
 
Choose a name, enter a url and then click ‘Create’
 

Implementing The Template

On the next page, click ‘Builder’ and the next page, click ‘Settings’
 
 
Then ‘Theme’
 
 
Then ‘Configure’
 
 
Click the pencil in the Starter Template field:
 
 
From the dropdown change Starter Template to BookingMultiActivityFlow
 
 

Setting Up CSS

Click Theme
 
 
Click the dropdown
 
 
Select Edit CSS
 
 
Click Use Overrides
 

Copy the following CSS code and paste it into the box:

html { min-height:100vh; height:100%; min-width:100vw; width:100%; overflow-y: auto; overflow-x: hidden; } html, body{ background-color: var(–lwc-brandNavigationBackgroundColor)!important; } .slds-popover__body, .slds-popover__body::before, .slds-popover__body::after, .slds-nubbin_bottom-left:before, .slds-nubbin_bottom-left:after, .slds-nubbin–bottom-left:before, .slds-nubbin–bottom-left:after, .slds-nubbin_bottom-left-corner:before, .slds-nubbin_bottom-left-corner:after{ background-color:grey }

 
Then click Save
 
Select Settings
 

Enabling Product Bite Icons

Next, we want to make sure we can add icons that sit with the product bites descriptions. They use Fontawesome icons like the example below:
 
 
Click Advanced:
 
 
Click “Edit Head Markup”
 

Copy the following code and paste it into the field:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ /> <script src=”https://kit.fontawesome.com/77ad6e6c52.js” crossorigin=”anonymous”></script> <meta name=”theme-color” content=”black”>

Go to https://fontawesome.com/docs/web/setup/get-started and create an account. When you verify your email and login to your account, you will be taken to your setup page. Scroll to Quick Set Up for the Web and copy the script code that includes the fontawesome url and use it to replace the same element of code included above. 

 
If you get the following message on save: 
 
 
Select Settings from the left hand menu, go to Security and Privacy, change the Security Level and select Allow:
 
 
Then click the Allow URL button agains the fontawesome url:
 

Change Colours to Match Your Brand

Now you can change the colours to match your brand or brands. We’ll show you how to match the site to the brand later.

If you have one brand you can simply click Theme and then Colors:

 
Now you can change colours for elements of the page.
A brief glossary:
Text Colour: Main Body Text Colour
Detail Text Colour: Button Text Colour
Action Colour: Background Colour for Buttons, Slots, Info Bites, Required Indicator, Cart Quantity Indicator, Timer Outline
Border Colour: Colour of borders for cart & customer fields 
 
 
Alternatively, particularly if you have a second brand, you can add a new branding set by clicking the dropdown on the Colors menu and select ‘Manage Branding Sets’, then “New Branding Set”
 

Previewing Your Online Booking Flow

You will need to make the site available for public access by following these steps:
https://help.salesforce.com/s/articleView?id=sf.community_builder_page_access_settings.htm&type=5
 
You can now preview your new flow. To do so, go to All Sites as described earlier. You will see a url has automatically been created.
 
Copy and paste this into your browser (or a holding document)
 
 
Then go to Sites in your Salesforce environment and choose a site that you would like to use your new booking flow on. When you have opened the page, double click on the part of the url highlighted below (the section before ‘/view’) and copy it.
 

Then return to your flow’s url and type /s/?site= and paste your code.

It will look something like this:

https://booknowsoftwareqa.my.site.com/supportenvexample/s/?site=uIaWgCOhKdWzbzYJ

 
Now it’s time to tailor your products. You can find instructions here.

Still need support? 

Get in touch with us and one of our helpful team will be in touch as soon as possible

Contact Us

MENU

HEAD OFFICE CONTACT

  • Office 135, Devonshire House, Basingstoke RG24 8PE
  • +44 (020) 8167 8522
  • +1 (844) 3276767
  • [email protected]
Linkedin

Copyright © 2023 BookNowSoftware.
All rights reserved.