Skip to main content

Embedding Peddle into your site

Start pointing your customer leads to Peddle and get paid for all successful sales. The embed is easy. We’ll walk you through it.

Once registered as a Peddle Publisher, a unique unique Publisher ID will be provided to the account. Add that ID, along with a snippet of code, called the bootstrap script, to the <head> of the site.

That code will render a button on the site and an overlay container for the modal. It will also generate a stylesheet for the button and the overlay, service requests to the embed API, and trigger events, like opening and closing the modal.

Implementation is a snap

1. In the <head> section of the web page, add the following snippet within a <script> tag. Just be sure that in the script below to replace YOUR_PUBLISHER_ID_HERE with the actual unique Publisher ID. An ID is required in order for the script to run as expected.

<script>
PeddlePublisherEmbedConfig={publisherID:"YOUR_PUBLISHER_ID_HERE"},function(){if("function"!=typeof window.PeddlePublisherEmbed){if(!window.PeddlePublisherEmbedConfig||!window.PeddlePublisherEmbedConfig.publisherID)throw new Error("Unable to bootstrap Peddle Publisher Embed, make sure to set PeddlePublisherEmbedConfig.publisherID");const e=(d,i)=>{e.queue.push({operation:d,options:i})};e.queue=[],window.PeddlePublisherEmbed=e;const d=()=>{const e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://publisher-embed.peddle.com/api/v1/embed/"+window.PeddlePublisherEmbedConfig.publisherID;const d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(e,d)};window.addEventListener("load",d,!1)}}();
</script>

Important: If the code snippet above is copied, make sure to manually swap out YOUR_PUBLISHER_ID_HERE for the Publisher ID that is unique to the account.

2. Next, create an element wherever the button should appear by using the ID "peddle-button." This will let the script know where to render the button. For example:

<div id="peddle-button">button</div>

This should render a button that triggers a modal upon click.

Bare minimum code example

Customize your configuration

Looking for a little more oomph in the embed? For more control over the implementation or additional functionality, the Publisher embed standardizes an operation and accepts additional options.

Here’s the call signature:

PeddlePublisherEmbed(operation: 'boot' | 'open' | 'close' | 'addEventListener' | ‘hydrate’ | 'removeEventListener', options: any);

PeddlePublisherEmbedConfig

A global configuration object is exposed that allows for customization of how the Publisher Embed behaves. This object is configured by default in the implementation snippet provided above, and can be modified at any point after the initial script loads.

window.PeddlePublisherEmbedConfig = {
  // required
  publisherID: ‘118535’,
  // optional, defaults to #peddle-button
  // if provided will auto-load and render button at this target
  // use null to disable
  target: '#peddle-button,
  // optional, z-index for overlay, defaults to 100
  zIndex: 100,
};

boot

Boot renders and attaches the button to the DOM, sets up the iframe and stylesheet, etc. It can be called repeatedly, if necessary, without consequence.

Boot should be called first, and must be called before other operations.

// renders button within #peddle-button
PeddlePublisherEmbed('boot')

// or, provide a different target
PeddlePublisherEmbed('boot', { target: '#something-else'})

Custom button target code example

open

Want to programmatically display the modal? Use this: 

PeddlePublisherEmbed('open');

To implement an account's custom button, trigger, or multiple buttons, check out these examples:

Custom button code example

Custom buttons (multiple) code example

close

Looking to programmatically hide the modal? Use this:

PeddlePublisherEmbed('close');

// set the `resetOnClose` option if you want to hide the modal and reset its state
PeddlePublisherEmbed('close', { resetOnClose: true });

addEventListener/removeEventListener

Event listeners can be added or removed, which is handy if to perform an action like analytics tracking after the embed has opened or the user has been handed over to peddle.com.

Events include:

  • open (when the modal is opened)

  • close (when the modal is closed)

  • handover (when navigating away from the modal to the main Peddle site)

function onOpen () {
  alert('you opened it!');
}

PeddlePublisherEmbed('addEventListener', onOpen);

// when you're done:
PeddlePublisherEmbed('removeEventListener', onOpen);

Basic event listeners code example

hydrate

Want to make things easier for users? If, for example, the type of vehicle the user is interested in selling is already known, hydrate prefills the embed with that information so they don’t have to manually do it. It then automatically takes the user to the latest unanswered question.

Basic hydration code example

Partial hydration code example

Full hydration code example

// an example that prefills year, make, model to 2020 Ford F-150

var options = {
  year: 2020,
  make: 'Ford',
  model: 'F-150'
};

PeddlePublisherEmbed('hydrate', options);

Options are an object that can have the following properties:

{
//  - year (e.g. 2021, can use yearID instead)
//  - yearID (e.g. 83, can use year instead)
//  - make (e.g. 'Ford', can use makeID instead, requires year or yearID)
//  - makeID (e.g. 33, can use make instead, requires year or yearID)
//  - model (e.g. 'F-150', can use modelID instead, requires make or makeID)
//  - modelID (e.g. 489, can use model instead, requires make or makeID)
//  - bodyType (e.g. 'Convertible', can use bodyTypeID instead, requires model or modelID)
//  - bodyTypeID (e.g. 6, can use bodyType instead, requires model or modelID)
//  - cabType (e.g. 'Regular Cab', can use cabTypeID instead, requires model or modelID)
//  - cabTypeID (e.g. 2, can use cabType instead, requires model or modelID)
//  - doorCount (e.g. 2, requires model or modelID)
//  - trim (e.g. 'Base', can use trimID instead, requires model or modelID)
//  - trimID (e.g. 861, can use trim instead, requires model or modelID)
//  - bodyStyle (e.g. 'Truck', can use bodyStyleID instead, requires trim or trimID)
//  - bodyStyleID (e.g. 11, can use bodyStyle instead, requires trim or trimID)
//  - fuelType (e.g. 'Gas', can use fuelTypeID instead, requires trim or trimID)
//  - fuelTypeID (e.g. 6, can use fuelType instead, requires trim or trimID)
//  - financialType (one of 'owned', 'financed', or 'leased')
//  - titleType (one of 'clean', 'salvage_or_rebuilt', or 'missing')
//  - mileage (e.g. 110000, must be a number)
//  - drivabilityType (one of 'drives', 'starts', or 'no_start')
//  - zipcode (e.g. 11238, must be a valid US zipcode)
}

Please note:

  • Year, make, model, trim are constructed linearly and each requires the previous one to hydrate correctly.

  • Body type, cab type, and door count are dependent on the model.

  • Body style and fuel type are dependent on the trim.

  • Peddle does not currently accept financed or leased cars, so passing those options will result in a dead end.

  • Financial, title, and drivability questions only accept a specific set of values (see the code block above for those values).

  • Since the embed has a linear flow, navigation is automatically set to take the user to the next question that remains to be answered. If the year, make, model, trim, and mileage are hydrated, for example, the embed will take the user to the next question they need to answer (in this case, financial type) since it's the first unanswered question.

  • Successful hydration does not mean the modal will be displayed. Either the user still has to click the button, or you need to programmatically open it in a subsequent call.

  • IDs are Peddle backend/API IDs. If you do not use any Peddle APIs, go ahead and use the non-ID variants instead

Configuring a campaign

Using the config object, we can pass a Campaign ID that will be attached to the offer, once created. To configure it, enter the publisherCampaignID variable into PeddlePublisherEmbedConfig as follows:

<script>
PeddlePublisherEmbedConfig={publisherID:"YOUR_PUBLISHER_ID_HERE", publisherCampaignID:"CAMPAIGN_ID"};
[...]
</script>

Remember to swap “YOUR_PUBLISHER_ID_HERE” with the actual unique Publisher ID and the CAMPAIGN_ID for the existing campaign to use (otherwise it will be using the default campaign).

With Campaign ID example

Configuring a Reference ID

Similar to configuring a campaign, Peddle can pass a Reference ID that will be attached to the offer, once created. To configure it, just pass publisherReferenceID variable into PeddlePublisherEmbedConfig as follows:

<script>
PeddlePublisherEmbedConfig={publisherID:"YOUR_PUBLISHER_ID_HERE", publisherReferenceID:"YOUR_PUBLISHER_REFERENCE_ID_HERE"};
[...]
</script>

Remember to swap “YOUR_PUBLISHER_ID_HERE” with the actual unique Publisher ID and “YOUR_PUBLISHER_REFERENCE_ID_HERE” with the unique publisher Reference ID.

With Reference ID example

See real-life examples

For a look at how these scripts can be implemented, see them in real life here:

Want to see Peddle's code in action? (Yes, right?) On GitHub see the entire code repository in the context of a Bootstrap site and a React site. Also take a peek at how the publisher embed code might look on the account's site.

Did this answer your question?