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:

<span id="pricewaiter"></span>

Step Two

Then include the script block to configure the button:

<script>
var PriceWaiterOptions = {

    // 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>

Step Three

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

<script src="https://widget.pricewaiter.com/script/[your api key here].js" async></script>

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.

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.

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.

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.

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.

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.

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.

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