Going live with your “Order now” website button

Introduction

Merchants can now have a customizable “Order now” button and a popup modal added to their site through a simple script available through Merchant Admin. The script allows users to instantly start getting orders through their website in a mobile friendly manner.

How it works: The merchant, or Wolt employee configures the button in the Business level view of Merchant admin (not venue!), goes to their website manager, copy-pastes a snippet of code to a specific section, and presses save. Exact steps vary slightly based on the site provider, but the overall logic is the same. The end result is that you will have a floating “Order now” button on your website, and an optional popup when users first open your site.

The implementation varies slightly by website service, but the functionality is very standard across services. This guide currently covers Wordpress & Wix, but the general method is the same. Below you’ll find a few examples. If your provider isn’t on the and you run into issues, please contact your Wolt contact so we can help. A starting point of searching for “adding custom scripts to my website header” should also get you far.

• SquareSpace

• Shopify

• Webnode

Why do it? Having a well presented and functioning link to your Storefront is a key method to drive traffic to your website. Compared to a regular link as one of the menu items to the button we provide has on average increased sales by 20-200% based on past experience. Most users doing online ordering are typically on mobiles, and only a menu item for ordering might get lost in a “burger menu” that requires an additional click to find.

Installation guide

Step 1: Configuring your “Order now” button

Access your merchant app site at merchant.wolt.com at business level (not venue) 

(https://merchant.wolt.com/experience/merchant/<merchantid>/s/<venueid>/storefront/sdk)

Step 2: Configure your button as you like

Configure the buttons as you like. Once saved, changes in the settings will automatically update the website button, so no need to stress about specifics. The buttons will take you to each respective storefront site at order.site/<yourname>, and you can also decide if the “Order now” button takes you to.

The modal option creates a popup to visitors coming to your site for the first time, but doesn’t show up as you switch between tabs. In the future, we plan to support attaching potential promotion campaigns to the visual for further sales boost.

Note: The font that’s used is based on your webpage, and currently it’s always in bold.

After you are done, press “Save” in the bottom right corner.

Step 3: Installing the button to your website

This section will vary slightly depending on the website, but the overall process is the same.

General steps are outlined below

1. Log in to the website manager you use, e.g., at yourwebsite.com/login, or your dashboard at manage.wix.com/dashboard or equivalent.

2. Navigate to a section on your editor that lets you add custom code to the header section of your website. The location of this will depend slightly on site provider, but detailed steps are outlined in the following section.

   1. Optional depending on site manager: Add a free plugin to support the addition of custom header scripts. E.g., for Wordpress one good one is WPCode free version, specific instructions below. 

3. Go to the field that lets you paste text

4. Go back to your merchant.wolt.com site, and press the “Show embed code” in the bottom right of the screen (requires you to save your settings first)

   

5. Copy the code from the box shown below

   

6. Paste the code to the “header” section of your website where custom code is allowed (See below for more specific instructions)

7. Press save

8. You are good to go! Next, visit your website to see what it looks like

9. Optional: Adjust any things you want to, any future changes update automatically

The following part describes the steps per website provider from Step 6 onwards. We have listed instructions for the most common sites below, but it is possible that not all managers are covered. Please let your Wolt counterpart know if your site hosting provider isn’t listed or you need help.

3.1. Website specific guide: Wordpress

Log in to your website hosting account, and navigate to the “Plugins” section.

There, search for a plugin called “WPCode”. Note, the free version is more than enough.

After you’ve installed it, you can activate it.

Once activated, go to the “Header & Footer” section. Note: Exact wording & navigation might differ.

This is where you paste the code from your merchant.wolt.com section where you configured the settings.

Press save, and you are done!

3.2. Website specific guide: Wix

Wix guide for adding custom scripts can be found here

1. Login to your Wix Dashboard

2. Navigate to your settings tab

3. Scroll down to the bottom to the "Development & Integrations section”, and click on “Custom code”

   

4. Press “Add custom code”

5. Paste the code script shown on your Merchant admin portal to the field on Wix

6. Select where to show it (all is usually the best choice)

7. Select “Head” in where to place the code

8. Press Apply