Skip to main content

Connect Delivery Gateway to your frontend

About the frontend integration​

Connect Delivery Gateway features to your webshop using a frontend integration. This uses the Delivery Gateway SDK and enables to use of features such as DGW's delivery method selector, the interactive map-based pickup point selector, or the custom address pinpointing feature.

Frontend initialization works like this:

  • You set up DGW in your own platform's frontend.
  • The web plugin handles creating a DGW session and passing it to the frontend logic.

Note that when using frontend initialization for your sessions, certain settings can't be overridden for the session. They are applied according to the merchant configuration or the customer's browser settings.

SettingData source
CurrencyMerchant configuration
LanguageCustomer browser
Authenticated customer (addresses)Not available
Pickup point delivery settings (enablement, pricing)Merchant configuration
Home delivery settings (enablement, pricing)Merchant configuration

To set up DGW using vanilla Javascript, you need to:

  1. Include the standalone DGW script.
  2. Mount DGW instances using DGW.mount.
note

For React applications, we recommend using our official React bindings, available at delivery-gateway-react-bindings. They come with Typescript typings, which are also available separately in the delivery-gateway-typings package.

Enable the DGW object​

To implement DGW features, you need to enable access to the DGW object.

The first step is to include the standalone Delivery Gateway script on every page where you want to use Delivery Gateway.

<script src="https://api.deliverygateway.io/sdk/en.js" async></script>

The script calls the window.DGWOnLoad callback (if present) with the global DGW object as its parameter. The global DGW object will also be accessible as window.DGW.

You can use the following pattern to make sure the DGW object is available:

function mountDeliveryGateway(DGW) {
    // Initialize Delivery Gateway using DGW.mount(...);
}

if (window.DGW) {
    mountDeliveryGateway(window.DGW);
} else {
    window.DGWOnLoad = mountDeliveryGateway;
}

Mount DGW instances to HTML containers​

Mounting a Delivery Gateway instance means creating a DGW configuration that implements a DGW feature in your page. For example, you can set up a delivery method selector that is presented to users when they place an order.

The DGW object contains a single method: .mount(opts). This method is used to mount a DGW instance in a specified container: it returns a DgwInstance object.

window.DGW.mount({})

The opts object of the .mount() method must contain properties that fully define the instance and its configuration. This includes the id of the HTML container that will contain the instance, the session ID for the instance user, and the view to be displayed.

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   containerId: "delivery-gateway",
   view: {
      type:
   }
})

The returned DgwInstance object contains the following fields:

  • unmount(): void Immediately unmounts the instance, removing all content from the container.
  • isMounted(): boolean Returns a boolean indicating whether the instance is still mounted.

For all available properties of the opts object, check DGW.mount(opts) properties.

Configure the embedded UI​