It's a busy Friday night at your restaurant. The phone is ringing off the hook with takeout orders, and your staff is juggling in-person diners with online requests. Amidst the chaos, a potential customer visits your website, looking to place an order. They scroll through your menu, but then... they can't find an easy way to order. Frustrated, they close the tab and order from a competitor.
Now imagine a different scenario: That same customer visits your website and immediately spots a prominent "Order Now" button. By clicking this, they're seamlessly placing their order, and your kitchen receives it instantly. That's the power of the Smart "Order Now" Button. Based off a Online Ordering Smart Button data test in Q1 2022 and Drive On-Demand Widgets data test in Q4 2023, adding highly visible ways for customers to order, like this button, can help increase sales by 15-30%.
What is the Smart "Order Now" Button?
The Smart “Order Now” Button allows customers to find their way into online ordering from the moment they hit your homepage, instead of having to search for it on your website.
How do I install the Smart "Order Now" Button?
Follow these steps to install the Smart "Order Now" Button on your website:
Locate the appropriate place in your website code: Find either the end of the <head> tag or the beginning of the <body> tag in your website's HTML.
Copy and paste the JavaScript code: Insert the following code snippet:
<script>
(function(e, t, r, n) {
var o, c, s;
o = e.document, c = t.children[0], s = o.createElement("script"), e.StorefrontSDKObject = "StorefrontSDK", e[e.StorefrontSDKObject] = {
executeCommand: function(t, r) {
e[e.StorefrontSDKObject].buffer.push([t, r])
},
buffer: []
}, s.async = 1, s.src ='https://web-apps.cdn4dd.com/webapps/sdk-storefront/latest/sdk.js' , t.insertBefore(s, c)
})(window, document.head);
StorefrontSDK.executeCommand('renderFloatingButton', {
businessId: 1234,
businessSlug: 'MerchantName',
floatingBar: true,
position: 'bottom',
buttonAlignment: 'center',
backgroundColor: 'transparent',
buttonBackgroundColor: '#D92128',
borderColor: 'transparent',
buttonText: 'Order Pickup & Delivery',
showModal: true
}
)
</script>
Customize the code: As a required minimum, you must replace the “businessId” with your unique DoorDash Store ID and “businessSlug” fields with your unique information. Note: You can find your unique DoorDash businessId by referencing the last digits of the Online Ordering URL within the Online Ordering tab of the Merchant Portal.
How can I customize my Smart "Order Now" Button?
If you're comfortable with JavaScript, you can tailor the Smart "Order Now" Button to fit your website's look and feel. Here are the customization options available:
businessId: Your DoorDash Store ID (numeric string) - This is the only required field.
businessSlug: Your business name for the generated URL (alphanumeric string, avoid special characters except dashes or underscores)
buttonAlignment: Horizontal position of the button ('left', 'center', or 'right')
position: Vertical position of the button ('top' or 'bottom')
buttonBackgroundColor: Color of the button (any valid CSS color value)
buttonTextColor: Text color of the button (any valid CSS color value)
buttonWidth: Width of the button (any valid CSS dimension value, e.g., '350px', '20em')
buttonText: Text displayed on the button (e.g., 'Order Pickup & Delivery')
floatingBar: Adds a solid floating bar behind the button (true or false)
backgroundColor: Background color for the floating bar (any valid CSS color value or 'transparent')
borderColor: Top & bottom borders of the floating bar (any valid CSS color value or 'transparent')
All fields except businessId are optional, allowing you to customize the button to your preferences.
How do I install the Smart "Order Now" Button on different website platforms?
Depending on your website platform, the installation process may vary. Here are instructions for some common platforms:
How do I add the button on GoDaddy?
Go to edit website.
Select the + icon at the top of the page to add a new section.
Select the HTML option.
Paste the Smart "Order Now" Button code in the "custom code" text box.
Replace all instances of “window” with “window.top.”
Save and test the button's alignment on your actual website.
How do I add the button on Squarespace (Premium account required)?
A Premium account is necessary to complete the below:
Choose the + icon at the bottom of the website homepage to add a new section.
Select the code option.
Choose HTML and uncheck the "display source" option.
Paste the Smart "Order Now" Button code in the "code" text box and hit apply.
Save and test the button's alignment on your actual website.
How do I add the button on Wix?
You will need a Premium account to complete the below:
Open the Site editor and select the add button.
Select Embed, then Marketing Tools, and then Custom Code.
In the "Head" section, choose Add Code.
Paste the Smart "Order Now" Button code where instructed and choose which pages to add the code to.
Save and test the button's alignment on your actual website.
How do I add the button on WordPress?
You will need a Business account to complete the below:
Navigate to the Plugins section in the dashboard.
Select Add New.
Search for the "DoorDash Online Ordering" plugin.
Select Install Now.
Activate the plugin on the plugin dashboard.
Choose the settings link inside the "Online Ordering by DoorDash" plugin row.
Set all required fields:
"Business ID" - your DoorDash business ID
"Button Text" - "Order Online" (default) or input another phrase
From the menu, go to Appearance, select Widgets, choose Online Ordering by DoorDash and drag it to an Online Ordering sidebar.
Once you’re ready, select Done.
Note: Make sure the "Display Button:" field has "Yes" selected.
By following these instructions, you can add a customized Online Ordering Smart "Order Now" Button to your website, providing your customers with a convenient, quick way to place orders.
Learn more about how DoorDash’s Online Ordering can help improve your website.
