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
Outline
There are a few steps we'll need to take to complete integration of Deliverr Website Fast Tags onto your storefront:
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:
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.
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>
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:
- By adding the data-skus attribute and the data-sellerid attribute onto the tag
- By adding the data-dskus attribute onto the tag
Note
Bothdata-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
- Type in the SKU(s) for all product variants this tag applies to, separating each SKU on its own line.
- Type your seller id as provided to you by Deliverr.
Using data-dskus
- 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"
})