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!

How to add the online ordering button in WordPress