Website Fast Tags

Guide

Deliverr Website Fast Tags is a way of quickly and easily integrating Deliverr's fast tags into an online storefront. This lets online shoppers know whether or not fast shipping, ie. one, two or three day, is available for a product in their area.

Before you get started

Please make sure that you've already signed up for our Website Fast Tags program and received your seller id, as you'll need that to move forward.

Outline

There are a few steps we'll need to take to complete integration of Deliverr Website Fast Tags onto your storefront:

  1. Including the library
  2. Adding the badge component
  3. Displaying the offer at checkout

You MUST implement both on your store in order to display fast tags, offer the correct shipping option at checkout, and receive Deliverr's discounted fast tag 2-Day rates.

Including the Library

Add the library to the storefront by placing the following script tag onto any pages that want to use the website fast tags library:

<script src="https://s3.amazonaws.com/deliverr-website-prod/website-storefront/main.js"></script>

Place this somewhere within the head or body tag.

Adding the Badge Component

There are two main methods of adding the fast tags to a page:

  1. The deliverr-tag component: This adds a fast tag badge that matches the service level available for the product(s) in the customer's location. This is something that fits well on pages with lists of products.

  2. The deliverr-tag-extended component: This adds a fast tag badge that matches the service level available for for the product(s) in the customer's location along with:

  • a _zip code form_ where a visitor can manually enter override our auto-detected location.
  • when a package is expected to arrive

The extended badge is something that fits well on product detail pages where a customer would like more information on a product and is closer to adding the product to the cart.

Add either the simple or extended tag html as shown below where you would like the tag to be placed on the page.

Simple

deliverr-tag 

<deliverr-tag></deliverr-tag>

Extended

deliverr-tag-extended 

<deliverr-tag-extended></deliverr-tag-extended>

Connecting product info

Both tags need to be connected to Deliverr seller data before being able to determine fast shipping availability. For both the basic and extended tag, there are two methods of doing this:

  1. By adding the data-skus attribute and the data-sellerid attribute onto the tag
  2. By adding the data-dskus attribute onto the tag

Note

Both data-skus and data-dskus take arrays that must be valid JSON. For examples of valid JSON data, see the official site.

Use the forms below to generate usable html using either data-skus or data-dskus.

Using data-skus

  1. Type in the SKU(s) for all product variants this tag applies to, separating each SKU on its own line.
  2. Type your seller id as provided to you by Deliverr.

Using data-dskus

  1. Type in the Deliverr SKU(s) for all product variants this tag applies to, separating each SKU on its own line. Deliverr SKUs (DSKUs) can be found in Deliverr's seller portal.

Displaying the Offer at Checkout

When a customer checks out, the website will need to retrieve the shipping option available for the cart. This is done through getShippingOptions. Pass the customer's full address along with the sku/dsku data

Example

window.DeliverrApi.getShippingOptions({
  destination: {
    street1: "110 Sutter Street",
    street2: "9th Floor",
    zip: "94014",
    city: "San Francisco",
    state: "CA",
    country: "US"
  },
  skus: [
    "sku127"
  ],
  sellerId: "deliverr-seller"
})
© 2020 Deliverr, Inc.