Quick Start Guide

Getting Started with PriceWaiter OnSite

We have ready-to-go plugins for many popular e-commerce platforms. See our integrations list to see if your platform is supported.


Getting started with a custom installation

A custom install is easy to perform with a few small pieces of HTML and Javascript.

Step One

First put a PriceWaiter placeholder where you’d like the button to appear on the page:

{% highlight html %} {% endhighlight %}

Step Two

Then include the script block to configure the button:

{% highlight html %}

// Configure the product the Name Your Price widget applies to.
product: {
    sku: 'EXAMPLE-1234',
    name: 'Left-handed Smoke Shifter',
    image: 'http://lorempixel.com/output/business-q-c-640-480-9.jpg',
    price: '19.99'
}

}; </script> {% endhighlight %}

Step Three

Then, include this code at the bottom of the page to load the button:

{% highlight html %} {% endhighlight %}

Bootstrapping

See the Quick Start Guide to install the button before using these configuration options. Stores may choose from a Name Your Price or Make an Offer button in their configuration.

Configuration Options

The global PriceWaiterOptions variable is used to initially configure the Name Your Price button. Available options and example code are described below. Keys containing dots (like button.size) should be provided as Javascript object literals.

Toggle Features

We recommend showing the PriceWaiter button on most of your products to see the best results. You can implement custom coding to toggle the button off on specific criteria. The button may be toggled independently of our conversion tools, such as Exit Intent Offers.

Option Description Values Default Value
enableButton (bool) Display the PriceWaiter button on page load n/a true
enableConversionTools (bool) Allow Exit Intent Offers and other tools n/a true

var PriceWaiterOptions = {
    enableButton: false, // hide button by default
    enableConversionTools: true // allow Exit Intent Offers and other conversion tools
}

Campaign

PriceWaiter Campaigns gives you to full control over the style, color and text of your buyer’s experience. Your button configuration javascript can specify which campaign to use on each product page.


var PriceWaiterOptions = {
    // Not shown: other required options
    campaign: 'n-1fhkt0lmclu394w27pohyk6k7'
}

You can specify multiple campaigns to allow our javascript to pick at random. This allows you to test the performance of different button campaigns against each other.


var PriceWaiterOptions = {
    // Not shown: other required options
    campaign: 'n-1fhkt0lmclu394w27pohyk6k7, p-1fhkt0lmclu394w27pohyk6k7, v-1fhkt0lmclu394w27pohyk6k7'
}

Currency

Set the currency that will be used for the offer. The effect will be to show the currency symbol for your selected currency wherever a price is displayed, and when the buyer checks out, their transaction will be paid in this currency. The default value of this setting is configured in Advanced Settings.

Option Description Values Default Value
currency (string) Currency to be used for the offer. Any valid ISO-4217 currency code USD

var PriceWaiterOptions = {
    // Not shown: other required options
    currency: 'USD'
}

Metadata

Metadata allows your store to pass arbitrary key/value data through the PriceWaiter system. Any data set here will be available when reviewing order data later, and will be passed to your Order Notification Callback URL.

Option Description Values Default Value
metadata (object) Any arbitrary key/value data may be set. n/a none

var PriceWaiterOptions = {
    // Not shown: other required options
    metadata: {
        affilate_id: 'company_1234',
        referer: 'pinterest',
        custom_val: 'G'
    }
}

onButtonClick()

Add a hook in here to do custom validation before showing the PriceWaiter UI to your customers. To prevent the PriceWaiter UI from being shown, return false from your custom onButtonClick handler.


var PriceWaiterOptions = {
    // Not shown: other required options
    onButtonClick: function(PriceWaiter, platformOnButtonClick) {
        // Your custom function(s) here
        if (!$('.i-agree').is(':checked')) {
            // NOTE: You must return an explicit false (not 0, null, or "") to prevent the PriceWaiter UI from being shown.
            return false;
        }

        // allow platform integration code to handle common cases
        return platformOnButtonClick();
    }
}

onLoad()

Since PriceWaiter is loaded asynchronously, it might not be available right when you start setting up your page. By adding a hook in here, you can update PriceWaiter when, for example, the user changes the product configuration.

Option Description Values Default Value
onLoad (function) A custom function to execute after the PriceWaiter Javascript API and button are available. n/a none

var PriceWaiterOptions = {
    // Not shown: other required options
    onLoad: function(PriceWaiter, platformOnLoad) {
        // Your custom function(s) here
        $('select.size').change(function() {
            // Call the setProductOption API Method
            PriceWaiter.setProductOption('size', $(this).val());
        });

        // allow platform integration code to handle common cases
        return platformOnLoad();
    }
}

onProductOptionsRequired()

If you have used setProductOptionRequired to mark a product option as required, this callback is fired when the user clicks the Name Your Price button without supplying all required product options. If not specified, PriceWaiter will use window.alert() to prompt the user to provide all the missing options.

Option Description Values Default Value
onProductOptionsRequired (function) A custom function you can specify to be executed when the user clicks the ‘Name Your Price’ button without selecting all required product options. n/a none

The following example is purely conceptual and should not be replicated literally. Example uses a jQuery selector to call the API Method setProductOption when the user changes the size of the product.


var PriceWaiterOptions = {
    // Not shown: other required options
    onProductOptionsRequired: function(options) {
        alert("Please provide the following product option(s):" + options.join(','));
    }
}

Product

Set information about the product the user is viewing. If your product has options such as color, size, etc. You should look at the API Methods and learn how to tell the PriceWaiter widget that the user has selected specific product options.

Option Description Values Default Value
sku (string) The SKU or Manufacturer’s Part Number (MPN) for the product. n/a none
name (string) The product’s name, e.g. Apple iPhone 64GB n/a none
brand (string) The brand name for the product. n/a none
categories (string) Array of product categories.    
description (string) A brief description of the product. n/a none
price (decimal) Your price for the product. The current add to cart or sale price should be used. n/a none
regular_price (decimal) The list price if the item is currently on sale. n/a none
image (string) The full URL (including http://) to an image for the product. Images will be scaled down to fit within an box approximately 200x200 pixels. Accepts .jpg, .png, or .gif image formats. n/a none

var PriceWaiterOptions = {
    // Not shown: other required options
    product: {
        sku: 'Product SKU',
        name: 'Product Name',
        brand: 'Sony',
        categories: [
            "Electronics",
            ["Electronics", "Cell Phones"]
        ],
        price: 99.99,
        regular_price: 120.00,
        image: 'http://yourdomain.com/images/path/filename.jpg'
    }
};

Product Options

Set selected product options (size, color, etc) on page load. You may also set on-the-fly with the Javascript API call setProductOption.


var PriceWaiterOptions = {
    // Not shown: other required options
    product: {
        options: {
            color: 'blue',
            size: 'medium'
        }
    }
};

Quantity

Set the default quantity value.

Option Description Values Default Value
quantity (integer) Default value of the quantity field. any integer 1

var PriceWaiterOptions = {
    // Not shown: other required options
    quantity: 2
}