How to Add a Smart "Order Now" Button to Your Website

A customizable, online ordering button that makes it easy for customers to order directly from your site.

Oct 1, 2025
4 min read
Mx - Smart Order Now Button - Header

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.

The Smart Button is available as part of the DoorDash Commerce Platform, a collection of tools and products that help merchants grow their businesses and brands. This feature is part of the Boost and Pro packages.

What does the Smart Button do?

  • Adds a persistent "Order Now” call-to-action to your website

  • Links customers directly to your Online Ordering page 

  • Stays visible as customers scroll on desktop and mobile

  • Can appear on every page of your website

What do I need before I can add the Smart Button?

  • Make sure Online Ordering is enabled for your business

  • You have access to your website’s HTML or CMS editor

  • You know your DoorDash business ID

How do I install the Smart Button?

  1. Copy the JavaScript code below.

  2. Paste it at the end of the <head> tag or the beginning of the <body> tag on your website.

  3. Replace businessId and businessSlug with your information.

Note: The code between <script> and StorefrontSDK.executeCommand must remain on a single line. Avoid adding line breaks when pasting.

<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',

  buttonBackgroundColor: '#D92128',

  buttonText: 'Order Pickup & Delivery',

  showModal: true

});

</script>

Additional customization options (advanced)

If you're comfortable editing JavaScript, you can further control layout and styling using additional optional fields supported by the Smart Button:

  • buttonTextColor: Text color of the button

  • buttonWidth: Width of the button (for example, 350px or 20em)

  • backgroundColor: Background color of the floating bar (or transparent)

  • borderColor: Top and bottom border color of the floating bar

All fields except businessId are optional.

How do I customize the Smart “Order Now” Button?

You can optionally adjust the Smart Button’s appearance and behavior by editing the configuration fields in the code.

Setting

Required

Description

businessId

Yes

Your DoorDash business ID

businessSlug

Recommended

Your business name used in the ordering URL

buttonAlignment

No

Left, center, or right alignment

position

No

Top or bottom of the page

buttonBackgroundColor

No

Button color

buttonText

No

Text shown on the button

floatingBar

No

Adds a background bar behind the button

showModal

No

Opens ordering in a modal window

What are the CMS-specific instructions?

GoDaddy

  1. Go to Edit Website

  2. Select the + icon to add a new HTML section

  3. Paste the Smart Button code

  4. Replace all instances of window with window.top

  5. Save and preview your GoDaddy website

Note: GoDaddy wraps custom code with additional markup, which requires a small adjustment. The button alignment may not appear correctly in the GoDaddy editor preview. Always test on your live website URL.

Squarespace (Premium required)

  1. Add a new Code section

  2. Select HTML and uncheck Display Source

  3. Paste the code and apply changes

  4. Save and preview your Squarespace website

Wix (Premium required)

  1. Open the Site Editor and select Add

  2. Choose Embed → Custom Code

  3. Add the code to the Head section

  4. Apply it to All Pages for best visibility on Wix

WordPress (Business plan required)

  1. Go to Plugins → Add New

  2. Search for DoorDash Storefront

  3. Install and activate the plugin

  4. Open the plugin settings and enter your business ID

  5. Enable Display Button and save your WordPress website

Need help?

If you run into issues installing or customizing the Smart Button, submit a support request.