Direct Order Button

Your Direct Order Button

Previously known as an Online Ordering Button, we’ve given these buttons a facelift. Now, you’re able to generate your own custom button with just a few clicks. Each button generates a unique piece of HTML for embedding on your website for customers to order from, while you pay no marketing fees.

Note: Your restaurant’s website may not allow for you to edit the HTML, if this is the case, there should be a prefilled “Add a button” option. Follow the directions for copying + pasting your Direct Ordering Shortlink into the “Add a button” field, and your website should populate a button for you. If your website allows you to edit HTML, follow these steps below to learn how to retrieve and set up your Direct Ordering Button.

 

Accessing your Direct Ordering Button

1.) Sign in to your Grubhub for Restaurants account

2.) Navigate on the left-hand menu to your Profile page

3.) Scroll down to the bottom of the page, where you will find the module for the Direct Ordering Toolkit.

4.) In the middle of the module, you will see your Direct Order Button. Customize, select ” Customize a button”

5.) After clicking this button, you’ll see a menu pop-up like the one below. From there, you can choose what is best for your restaurant.

6.) First, choose whether you would like the button to link to your menu on Grubhub or on Seamless (if you’re not sure, revisit your profile page in your Grubhub for Restaurants account–this information is available to you here).

7.) Next, choose whether you want the button to redirect within the window your customer is using, or if you’d like it to open a new window on their browser.

8.) You can now select whether you’d like the button to be large or small.

Hint: You can create multiple custom buttons, such as a large one at the top of your website and a small one in the footer.

9.) Now for the fun part–choose your button colors!

a.) You can select a color by clicking anywhere on the color map, or, you can choose an exact color that is part of your restaurant’s branding.

 

b.)It will populate with options to add RGB colors, but using the arrows next to the “B”, you can shift between RGB, HSL, and HEX.

Note: If you’re unsure, you can google for a “color picker” such as this one to click on a color from your website, and be given the HEX code for that color to use here.

c.)After selecting your button color, you will see the mock-up to the top right will update to reflect your choice.

10.) Next, choose the text color for your button by following the same steps outlined above.

        Note: Remember that your customers will be reading this button on your website from both desktop and mobile devices, be sure to choose a contrasting color that is easy to read against your button color. If you’re not sure how a color will look, choose the color and refer to the mockup on the top right. If you have trouble reading it, chances are your customers will as well.

11.) After making your selections, refer to the button mockup on the top right of the window to ensure it’s correct. After you’re satisfied with how your button looks, select the HTML text and copy it to your clipboard.

 

How does the toolkit work?

These links direct customers to order off of your Grubhub page, but because of the way that the link is set up, Grubhub recognizes these customers came from your channels–and therefore we won’t charge a marketing fee for the marketing you’ve done to get these orders. These links are always free for you to use, and you can retrieve them at any time from your Profile page in your Grubhub for Restaurants account.

 

Where to use your Direct Order button

Now that you have your button, how do you use it? If you’re not familiar with HTML, we can help!

As mentioned above, some websites have pre-set themes(such as Squarespace or WordPress) that don’t allow you to directly edit HTML or the code that builds the website. If this is the case, your website should have an “Add button” section where you can use your Direct Ordering Shortlink to create a button through your website. 

Common website hosts with directions for editing your site:

 

Not sure if you made the list?

Is your site host not listed or you’re not sure? That’s okay! If you’re still able to contact the developer or webmaster of your site, try asking them which host they used.

 

 

Return back to the Direct Ordering Toolkit Article

Learn more about your Direct Ordering Shortlink

Learn more about your Direct Order QR code

Other helpful resources:

Get started with your account

Learn more