Overview
Embedded Listings is a paid upgrade feature in Lister that allows you to drive more traffic to your existing websites by pulling in all of your active listings to your existing organization’s website. When a user clicks on a product on your website, it will navigate them to the listing on the marketplace to bid on or purchase it.
This allows your organization to increase SEO for your listings, create a more personalized shopping experience for your customers, and drive more traffic to your organization's e-commerce listings!
Example Embedded Listing Page
In this article, we'll go over how to how Embedded Listings works, the customization options available, and how to install it.
Table of Contents
How it works
Here's a high-level overview of the steps to setting up your own embedded listings page:
Navigate to Admin > Embedded Listings, then click "Get started" to activate the new feature. This can take up to 5m to be ready
Note: If you don’t see the option to activate, please reach out to growth@uprightlabs.com for more information
Configure your embedded listings page as desired
Note: this can be done directly in Lister without writing any code (recommended) or can be configured manually if desired
Install embedded listings on your website
Drive more traffic to your website and listings!
How to Customize your Embedded Listings Page (No Code)
Once embedded listings is enabled, you can configure your website without writing any code. The following is a list of changes you can make to the design of your webpage within Lister.
Header Content
The header content is the text that appears above your main search bar.
Brand Color
The brand color will be used for various components on the page, like the price slider, the color behind the search bar, and any checkboxes that are selected in the filtering section.
Default Sort
The default sort determines how items are sorted by default, but can be changed by the end-user as they desire.
Filters
All embedded listings come with a product category filter, by default. The following filters can be optionally added to your website to make it easier for buyers to find the products they want.
Supplier filter - this will allow a buyer to see what supplier an item came from and can be used for Buy Online Pickup In Store (BOPIS)
Price slider - the price slider will allow buyers to select a price range and see all items within that price range
Pickup-only filter - allows buyers to filter for pickup only items (especially handy for Buy Online Pickup In Store)
Listing format filter - allows buyers to filter by products that are listed as a BIN or as an auction style listing
Once you have configured your settings, it's time to install embedded listings on your website!
How to Install Embedded Listings
Installing Embedded Listings on your website is easy! It takes about 5 minutes and requires the ability to edit your website's code.
Once your settings are configured, navigate to Lister > Admin > Embedded Listings and copy the "Iframe" snippet.
Once copied, place this "Iframe" in the HTML code of the page on your website you want Embedded Listings to display. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<header>My website</header>
<main>
<iframe
src="https://embedded-listings.uprightlabs.com?embedKey=D2019561246AD"
allowfullscreen
frameborder="0"
style="height: 1000px; width: 100%; border: 0"
/>
</main>
<footer>Contact us</footer>
</body>
</html>
Once placed in your HTML code, your listings will begin importing! This process will take a few minutes, but listings will automatically populate and then auto-update every 5-10 minutes.
Note: If you decide to change your configuration options after installation, simply make the adjustments in Lister, and replace the code on your website with the new output of code.
How to Manually Hard-Code Embedded Listings Customization
There are a bunch of parameters for controlling how Embedded Listings looks and works.
While it's recommended you use the Lister Admin settings to generate a configuration, you can pass in the following settings to the iframe "src" parameter as query params to change the defaults.
<iframe
src="https://embedded-listings.uprightlabs.com?embedKey=<YOUR_KEY>&brandColor=<YOUR_COLOR>"
/>
Here's what each parameter does:
embedKey (required): A unique key that allows access to embedded listings.
brandColor: A hexadecimal css-color you can supply to change the iframe coloring
headerContent: This changes the default header copy here
defaultSort: This changes the default sorting for embedded listings
Filters: the following options toggle whether or not a filter is shown
supplierFilter: true or false to show
priceSlider: true or false to show
pickupOnlyFilter: true or false to show
formatFilter: true or false to show
Note: make sure you URL encode your params:
Bad
<iframe
src="https://embedded-listings.uprightlabs.com?brandColor=#000"
/>
Good
<iframe
src="https://embedded-listings.uprightlabs.com?brandColor=%23000"
/>
CSS Styling Overrides
This box can be used to change the styling of embedded listings within your page. For example, changing the top header size of your page:
header {
min-height 200px
}
Embedded Listings Reports
Once embedded listings are enabled on your account, you’ll find a new report to understand the performance of your embedded listings. This report includes how many clicks you're getting for products listed via embedded listings.
How to Find and Download Embedded Listings Report
Click the report icon in the top right corner of Lister
Select “Embedded listings” in the Downloadable Reports section
Choose a date range for the report
Optional: Select a timezone
Click “Generate report”
Download the report
How to Understand the Embedded Listings Report
Product title (column A)
Product SKU (column B)
Clicks (column C )
How many clicks on the embedded listings site during the selected timeframe for each product
Have questions? Reach out to us at support@uprightlabs.com or via chat anytime between 9am-6pm ET, Monday to Friday