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.
中文中幕无码亚洲视频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.
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:
We recommend that you get the latest version of your custom code中文中幕无码亚洲视频 from the Admin area and update it on your website.
中文中幕无码亚洲视频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:
中文中幕无码亚洲视频Here are some properties to play with:
Property | Description | Example | Preview |
---|---|---|---|
background-color | Sets the button color. | style="background-color: #008F00" | |
color | Sets the text color. Make sure you add "!important" for this to work. | style="color:#194719 !important" | |
font-size | Sets the font size | style="font-size:16px" | |
padding | Sets the space around the text. | style="padding:15px" | |
border-radius | Sets the shape of the border. The higher the value, the more rounded the corners. | style="border-radius:40px" |
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!