Follow

Cinch Web Publishing: Fundamentals

Publishing Cinch on your website

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 colour stands out from the background and surroundings.
  • The size is important. You need to make your online ordering button slightly more prominent than the other 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 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 colour 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:

<!-- If you would like to customize the button, remove or change the "class" attribute inside the <span> tag -->

<span class="glf-button" data-glf-cuid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

data-glf-ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"> See MENU & Order</span>

<script src="https://www.foodbooking.com/widget/js/ewm2.js" deferasync ></script>

 

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:

1. replacing the

"glf-button" 

class with your own button class, or

 2. defining your desired style inline.

 

Here are some properties to play with:

Property

Description

Example

Preview

background-color

Sets the button color.

style="background-color: #008F00"

order_online_background.JPG

color

Sets the text color. Make sure you add "!important" for this to work.

style="color:#194719 !important"

order_online_colour.JPG

font-size

Sets the font size

style="font-size:16px"

order_online_font_size.JPG

padding

Sets the space around the text.

style="padding:15px"

order_online_padding.JPG

border-radius

Sets the shape of the border. The higher the value, the more rounded the corners.

style="border-radius:40px"

order_online_border_radius.JPG

 

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

style="padding:15px; font-size: 16px; border-radius:40px; background-color:#008F00"

 

inserted in the button code like this:

 <span class="glf-button" data-glf-cuid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" data-glf-ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" style="padding:15px; font-size: 16px; border-radius:40px; background-color:#008F00"> See MENU & Order</span> <script src="https://www.foodbooking.com/widget/js/ewm2.js" defer async ></script>

 

will produce the following result:

 order_online_example.JPG

 

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:

 style: "position: absolute; left: 50%; transform: translateX(-50%); top: 100px;"

 

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!

 

Was this article helpful?
0 out of 0 found this helpful