How To Add And Customize The Online Ordering Button

Our design starts from the idea that there is nothing more important than sales generation. Once people click on the order button it’s clear they want to order, and that they want to order from you. The marketing job has ended and the sales job starts. Now here is no need to show other visual elements that distract the user from the food ordering and food pictures. This is why we do that grey overlay over the site. To create this ‘tunnel vision” and stimulate people focus on the ordering, not on some side-banners or website residual content.

Also, the button code allows us to make the visitor have the "same site" experience on their PC browsers. It is a known fact that once you direct PC visitors to a different URL link, you may experience a conversion drop of between 10-30%.

Technical considerations: the button code solves many display and alignment matters in an automatic way so that you can just copy-paste the code without additional hassle.The button code automatically detects mobile browsing and serve mobile version of the ordering widget.

Unlike other solutions, our ordering widget is not mobile responsive. We basically have two different versions: one optimized for PC browsers and UX, that works best with pad clicks and scrolls, the other optimized for mobile browsing that is meant for taps and swipe operations. But you don’t need much care about using all this, the button code will do what is needed to direct visitors in a proper manner.

Please have a look (both from mobile and PC) on our demo restaurant ordering button here: https://www.pronto-ny.com/

Once you've finished the other essential account setup steps, you'll find your unique button code and publish instructions on the restaurant admin area -> setup tab-> publish section -> website

Publishing the online ordering button on your website is normally a matter of a two-clicks copy paste. Things can get a little more complicated though when you run into the limitations of the website builder, especially if you also want to customize the button to best fit your layout and design.

We’ve seen hundreds of ordering buttons and how you use them on your websites. Thanks to your feedback, we were able to constantly improve the html code and address the most common website builders. In this latest post we’ve put together our tips and how-to-s on making the most of your online ordering button.

Get your online ordering button noticed

For the orders to happen, your website visitors need to notice the button and click on it. Magic cannot happen otherwise. Go through this list of best practices and make sure you check all of them.

• Show the button on the homepage. We are not excluding other pages, if you will, but make sure your online ordering button or call to action is present on the homepage. Also, place it above the fold. Your customers need to see it right away, to make sure you’re really doing this and their order will not be ignored. Moreover, many food clients tend not to scroll. One bad example we have seen: the button placed only at the bottom of the contact page. This significantly diminishes the chances of getting any online orders.
• Make the button stand out. The online ordering button should be visible and draw attention. Don’t just “throw it” in a crowded corner of your website. Give it space and make sure the color stands out from the background and surroundings.
• The size is important. You need to make your online ordering button slightly more prominent than the others buttons or links in the page. Pay attention however not to exaggerate. A button that is too large will kill the rest of your content in the page.
• Action oriented text. You need to guide your client to your desired goal: online ordering. When pressing the button, your client should not be surprised about the result. Your text should be inviting and explicit about what’s going to happen next. “See Menu & Order” or “Order Online” are good labels to use.

How to add the custom button to your website

As stated before, for adding the button you only need to copy-paste the code in your page. However, most of the website builders come with some restrictions. Check out our visual examples and recommendations:

Lately we’ve made several improvements to address the limitations of the website builders. Here are some examples:

• It’s fully compatible with WordPress, meaning that no more plugins are needed. You can just copy paste the code in Text mode.
• The button can be added multiple times on the same page without any more issues.
• The button and the online food menu load faster.

We recommend that you get the latest version of your custom code from the Admin area and update it on your website.

How to customize the See Menu & Order button

It can happen that the default orange See Menu & Order button does not go well on your website. The color does not stand out, the size does not fit the placement, the font or the button style itself do not match your other website elements. In such cases you need to change the look and feel of the online ordering button.

If you are a “do it yourself” type of person but you don’t know how to handle this one, continue reading this section.

Your button code looks like this:

The button’s current look and feel is given by class="glf-button". In this class we have defined the properties that make the button look orange, have the font white and so on. You can change the button style by:

• replacing the glf-button class with your own button class, or
• defining your desired style inline.

Here are some properties to play with:

Combine the properties together to get to your desired design. For example, the following style:

inserted in the button code like this:

will produce the following result:

You can also use the style property to adjust the position of the button in its container. Here is an example of how to place the button horizontally centered and 100 pixels down from the top:

One final tip: There is a nice tool online (JS Bin) that allows you to play with a piece of code and it shows you right away the result. Open it, delete whatever code is already there on the left column and paste your own button code. As you make changes in the code, the right column will automatically refresh. Give it a try, it will save you time.

Have fun customizing your button, but do it wisely! Keep in mind the best practices we talked about at the beginning of this article!