Adding an HTML Page to Your Kiosk Flow

Unlike templated options, a custom HTML page provides businesses with the flexibility to design the page exactly as they envision, ensuring it aligns perfectly with their brand and messaging.

Accessing the HTML Page

To begin, navigate to your kiosk flow editor. Look for the purple plus button – this is your gateway to adding a new page. After clicking the purple plus button, a menu will appear with various page options. Choose "HTML" to create a page where you can showcase images or display important messages.

HTML Page Settings

Design Tab

Background Images: Choose or upload background images to enhance the aesthetics of your page.

HTML Page_ Background Images.png

 

Top Content (HTML, CSS, Javascript): Customize the top section of your page using HTML, CSS, or Javascript to meet your specific requirements.

HTML Page_ Top Content.png

 

Bottom Content (HTML, CSS, Javascript): Similar to the top content, you can customize the bottom section of your Splash page with HTML, CSS, or Javascript.

HTML Page_ Bottom Content.png

 

Page Tab

Page Name: Give your HTML page a descriptive name.

Deactivate this page within the flow: Temporarily disable the page if necessary.

Show this page while the previous page is communicating with the Patch servers: Choose whether to display the page while data is being processed. This is set by default to 3 seconds.

HTML Page_ Page General Settings.png

Page Filter Settings: Add filters to the page to control if this page will show for all Contacts or only Contacts that match a set of criteria.

HTML Page_ Page Filter Settings.png

 

Advanced Tab

Sync Settings: Decide whether the page should sync with the server when completed.

Security Codes: Require a security code to proceed to the next page; you can add new codes if necessary.

Message Page_ Security Codes.png

 

Automatically Set Field Values: This setting allows you to set data on the Contacts profile based on completing this page. For example: If you are using this page to conduct a survey you could apply a data field like a Tag to each contact that completes the survey so that way you can make sure they aren't prompted to complete the survey again on their next check-in. If you set any type of data you can then use that data to filter against later or to further segment your database.

HTML Page_ Automatically Set Field Values.png

set fields page.png

 

Flow Settings

Back/Next Button Colors: Customize the background and text colors for the back and next buttons.

HTML Page_ Back Next Button Colors.png

 

Idle Timeout: Set how the kiosk behaves when left idle (e.g., Do Nothing or other options like syncing if check-in started and resetting the flow without saving data).

HTML Page_ Idle Timeout.png

 

Flow Security Codes: Apply security codes to the entire kiosk flow, ensuring data security throughout the process. 

HTML Page_ Flow Settings Flow Security Codes.png