JavaScript API

The snippet from the Appearance tab is all most sites need. Reach for the JavaScript API when you want to set appearance from code, open the survey from your own button, react to events or change the widget while the page is open.

The command queue

Everything goes through one function, window.rawquotes(command, ...arguments). Before the widget script has loaded, calls to it are collected in a queue and replayed in order once it has. You define the function yourself with this stub, so you can call it at any point on the page:

<script>
  window.rawquotes = window.rawquotes || function () {
    (window.rawquotes.q = window.rawquotes.q || []).push(arguments)
  }
</script>

Two things about order:

• Put on calls before init, or the ready event is already gone when you start listening.
• A <script src=".../loader.js" data-survey-id="…"> tag calls init for you. If you also want your own init with options, load the script without data-survey-id, or put your own init before the loader tag (see the next section).

One view per survey

A page shows at most one view of a given survey. The first init for a surveyId wins, whether it was queued before the script loaded or called after. A later init for the same survey mounts nothing and writes a line starting with [rawquotes] to the console. To change how the view looks, use update. Different surveys mount independently. Once the widget is removed from the page (for example by a single-page app navigating away), a new init for that survey mounts again.

init options

rawquotes('init', { surveyId: 'YOUR-SURVEY-ID', autoOpen: false })

Commands

Open and close from your own code

show and hide do nothing until the widget has the survey and has drawn something. In floating mode the widget tells you when that moment comes with the launcher_ready event, so wait for it:

<button id="feedback">Tell us what you think</button>
<script>
  window.rawquotes = window.rawquotes || function () {
    (window.rawquotes.q = window.rawquotes.q || []).push(arguments)
  }
  window.rawquotes('on', 'launcher_ready', function () {
    document.getElementById('feedback').addEventListener('click', function () {
      window.rawquotes('show')
    })
  })
  window.rawquotes('init', {
    surveyId: 'YOUR-SURVEY-ID',
    appearance: { accentColor: '#4f46e5' }
  })
</script>
<script src="https://intake.rawquotes.io/widget/loader.js" async></script>

In inline mode there is no launcher_ready; show and hide work from the rendered event on. If the survey is not available (render_error), nothing is drawn and neither command does anything.

Change the widget while it is on the page

update merges the appearance you give it into what the widget already holds, so you only send what changes:

rawquotes('update', { appearance: { colorScheme: 'dark', language: 'de' } })

• Colours, shape, font, language, colorScheme, dark, icon, choiceSize, choicesAlign, texts, placement.corner and placement.offset change live.
• placement.mode, container, surveyId and mode are fixed at init. In update they are ignored with a console warning.
• The visitor keeps their place: answers, the current question and typed text stay after an update.
• An update sent before the survey has loaded is applied to the first paint. One sent before any init is ignored.

When an option is rejected

The widget never throws on your page. A field with a wrong type, an unknown name or a value outside its allowed set is dropped, the rest of the object still applies, and the browser console gets one line per dropped field:

[rawquotes] appearance.accentColor must be a #RRGGBB colour

An unknown colorScheme in init is rejected the same way as in update: the console gets a line and the survey's own setting stays. The same goes for a placement.corner other than bottom_left or bottom_right.

If the colours or the language do not change, open the console and look for lines starting with [rawquotes].