Embed

Thermostat's embedded surveys make it easy to gather customer sentiment data right from within your website, SaaS app, or ecommerce store.

From the embed section in any survey, simply copy and paste the JavaScript code into your site or app.

Normally you'd put the embed code in a footer that's included on every page.

While the widget has it's own logic to limit how often customers are surveyed feel free to wrap your own custom logic around the thermostatio.start() call to only have the code run when necessary.

The exact code used to embed is generated per survey. In general, in the footer of your application/output HTML, you will add something that looks like this:

<script src="https://thermostat.io/s/xxxxxx/survey.js"></script>
<script>
thermostatio.start({
    email: false, // Optional
    name: false // Optional
});
</script>

You can customize it to fill in user/customer information if it is available from your application. For example, you may have a customer email and name available to you from your application templates:

<script src="https://thermostat.io/s/xxxxxx/survey.js"></script>
<script>
thermostatio.start({
    email: '[email protected]',
    name: 'Example Name',
});
</script>

Custom field information can be added using the fields object. For example:

<script src="https://thermostat.io/s/xxxxxx/survey.js"></script>
<script>
thermostatio.start({
    email: '[email protected]',
    name: 'Example Name',
    fields: {
        paid_customer: true,
        customer_id: '12345'
    }
});
</script>

Here's a full example of the Javascript embed configuration:

thermostatio.start({
    show: true,

    email: false, // Optional
    name: false, // Optional

    //Custom Fields
    fields: {fieldname: 'field value'},

    // Set by survey configuration
    accentBackground: '', // e.g. '#ffffff',
    accentColor: '', // e.g. '#ffffff'

      // Set a custom accent color for each NPS response type
    detractorColor: false, // e.g. '#e35657'
    passiveColor: false, // e.g. '#ffe534'
    promoterColor: false, // e.g. '#4cc802'

    // When this cookie exists survey won't be shown
    hide_cookie: 'thermostatio_hide',

    // Default value set by survey configuration
    // Don't resurvey the same person again for this many days
    lockout_period: 90,

    // Default value set by survey configuration.
    // If the user manually closes the survey don't
    // attempt to survey again for this many days
    closeLockout: 90,


    // Tracks how many page views there have been
    plcookiename: 'thermostatio_pl',

    // Default value set by survey configuration.
    // Min number of page views required
    // before attempting to show survey
    minPageLoadsBeforeShowing: 10,

   // How long the pageload tracking cookie lasts
    pageLoadTrackingPeriod: 3,
});
Option Type Default Info
show boolean true If set to false the survey will not be displayed regardless of other conditions.
email string false Optionally identify a user's response (and add them to the survey email list) by their email address.
name string false Optionally add a user's name to their response.
fields object none Optionally add custom field values
accentBackground string set in survey The background color of the survey popup.
accentColor string set in survey settings The primary color of the survey popup.
hide_cookie string thermostatio_hide When this cookie exists, the survey won't be shown, regardless of the cookie's value.
lockout_period integer set in survey settings Don't resurvey the same person again for this many days.
closeLockout integer set in survey settings Don't resurvey the same person again for this many days if they manually close the survey modal without a response.
plcookiename integer thermostatio_pl Tracks how many page views there have been across all pages with this snippet.
minPageLoadsBeforeShowing integer set in survey settings Min number of page views required before showing the survey.
pageLoadTrackingPeriod integer 3 How long the pageload tracking cookie lasts.

There are a few methods you can use to further control the Thermostat embed.

thermostatio.start({...});

Create and initialize the thermostat embed, with included configuration options.

thermostatio.show(function () {
    // Do something after thermostat is opened
});

Opens the survey regardless of other settings. This takes an optional callback function that will be called after the embed is rendered.

thermostatio.close();

Closes the survey.