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:

  1. Reach out to growth@uprightlabs.com to get access to Embedded Listings

  2. Once enabled, you'll see a new section in your Lister Admin settings called "Embedded Listings"

  3. Configure your embedded listings page as desired

    1. Note this can be done directly in Lister without writing any code (recommended) or can be configured manually if desired

  4. Install embedded listings on your website

  5. 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, as desired, 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 websites 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
}

Admin - Embedded Listings 2022-04-12 at 6.32.08 AM

Have questions? Reach out to us at support@uprightlabs.com or via chat anytime between 9am-6pm ET, Monday to Friday

Did this answer your question?