Overview
Order Experience Builder (OXB) is the front-end builder and designer for the Paytronix Online Ordering product that allows you to customize the guest experience to your brand.
Paytronix provides a library of pre-built experiences (templates) you can use to get started quickly. You adjust the fonts, colors, and images to align with your brand standards. You no longer need expensive designers and web developers to build a custom frontend. Order Experience Builder is designed to be self-service for our customers, reducing cost of ownership and effort required to build and maintain the guest experience.
Order Experience Builder is provided in two (2) modules: Builder Edition and Agency Edition. Builder Edition is built to allow online ordering admins and marketing managers to quickly set up a simple guest experience that aligns with your brand. Agency Edition is designed with advanced configurations for clients who have more experienced technical resources available and who are used to independently using low code web design builders (similar to web design tools like WordPress, Webflow Wix, etc.).
We recognize not all clients have access to the technical resources to customize their guest order & delivery flow and the article below outlines how you can use the pre-built experiences we provide in the Builder Edition to quickly construct an exceptional online guest ordering experience.
How do I access Order Experience Builder?
From the top navigation of the Paytronix Ordering Platform, click Order Experience Builder as seen below. .
The Order Experience Builder landing page will display a list of custom experiences, if any have been built.
How do I create a new experience?
To create a new experience, click on the Let’s get started! button at the bottom of the page.
1. Select a Template
Select one of the existing templates.
Review the template in full screen mode, then click Select Template in the upper right. if you’d like to use this template.
You have the option to use the default settings for the template or customize one of our color schemes to fit your brand.
2. Customize Color Scheme
Select the primary, secondary and/or background color to customize it by picking your color or adding your HEX code.
Select Show advanced color settings to further customize your color palette. Click on Continue in the lower right corner of the screen to move on.
3. Set Typography
You now have the option to choose the typography for your theme. Once you have customized your fonts, click on Continue in the lower right corner of the screen to move on.
Next, you can choose to upload any relevant imagery, add a mobile-overlay icon or add animations for key actions to further brand your guests' experience.
4. Image Upload
Upload images to use for a default menu image or a header. Add a logo to to show your brand or even add a customized favicon. See: How do I add a Custom Favicon in Order Experience Builder?
5. Choose an Icon
Choose an icon to show in the menu overlay modal on mobile devices. This allows users to search for locations or check their bag.
6. Add Animations
Animations can add to your guests' experience by adding touch of flair during page loads, submission confirmations and more. Paytronix supports the Lottie animation which is a lightweight, scalable animation file format. Find and download a wide variety of Lottie animations at lottiefiles.com by browsing their library or create your own.
Once you have uploaded your media or added animations, click on Continue in the lower right corner of the screen to move on.
7. Customize Text
Next, customize what the various components of your online ordering experience will say, by adding in Text Content. Scroll through the list, and click the down arrow to expand each field to see the options for customizing your messaging.
8. Order Confirmation
The optional Order Confirmation Modal allows you to customize a message that will display to your guests, prior to confirming their order. Below, you’ll see the options for what the standard message can be, as well as how the buttons are displayed for confirming or cancelling the order.
Your guest’s view of this modal, will look something like this:
9. Description Parameters
Finally, you can customize your menu description parameters, as seen below.
10. Use Event Animations
Looking to add some extra flare to your customer’s ordering experience for special occasions/holidays?
Toggle on Use Event Animations to see fun animations and graphics to appear for holidays like Valentine’s Day.
Like what you see? Terrific! Click Finish in the lower right corner to complete your customized order experience. You can then choose to either Save Draft or Publish.
Note: Once Publish is selected, your menu will be live. Be sure to confirm the information is accurate before selecting Publish.
How do I edit an existing theme?
From the Order Experience Builder Landing page, click Edit Theme on any of the existing experiences that you would like to change.
You’ll then be able to edit colors, fonts, images, text content, menu item descriptions and/ or add your own custom stylesheet, on the left side of the screen.
When you’re finished editing, you can choose to Save Draft or Publish.
Note: Once Publish is selected, your menu will be live. Be sure to confirm the information is accurate before selecting Publish.
Can I use Order Experience Builder on my Mobile App?
Give your guests a consistent experience by mirroring your OXB experience on your mobile app by using our embedded OXB feature. Contact us to learn how our team can configure this for your iOS or Android build.