Javascript 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.

Embedding

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: {{ auth()->user()->email }},
    name: {{ auth()->user()->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: {{ auth()->user()->email }},
    name: {{ auth()->user()->name }},
    fields: {paid_customer: {{ auth()->user()->paid }},
             customer_id: {{ auth()->user()->customerid }}}
});
</script>

Configuration Options

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.

Public Methods

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

`start()`

thermostatio.start({...});

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

`show()`

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.

`close()`

thermostatio.close();

Closes the survey.