Surveymoji

Deployment Guide

Placing Surveymoji onto your site is really easy.


Simplest Example

So let’s get right to it: to place a Surveymoji instance on a page, add this to the desired location:

<div class="surveymoji"></div>
<script src="https://surveymoji.com/api/embed/"></script>

That’s all there is to it. This will embed a Surveymoji instance onto the page, just like this:


Interface Sizes

By default, Surveymoji fills the width of its parent container. That might make the Surveymoji instance appear overly large, which may not be appropriate for the given page. You can get around this by placing Surveymoji in a container element with the desired width, or simply set a width on the .surveymoji container (via CSS, or inline). Like this:

<div class="surveymoji" style="width: 15em;"></div>
<script src="https://surveymoji.com/api/embed/"></script>

Which produces this:


Alternate Icons

You can change any or all of the 5 emoji displayed in the Surveymoji interface. To do this:

  1. Add a data-custom-emoji attribute to your .surveymoji div. Give it a unique value, which will also serve as the name of your emoji object.
  2. In another <script> element, declare the emoji object, assigning the corresponding custom emoji (using the UTF-8 codepoint) to the scale. (You can find emoji codepoints on Emojipedia.)

Like so:

<div class="surveymoji" data-emoji="other_faces" style="width: 50%;"></div>
<script>
var other_faces = {
    5: '1f924', // Drooling Face
    4: '1f609', // Winking Face
    3: '1f611', // Expressionless Face
    2: '1f629', // Weary Face
    1: '1f4a9'  // Pile of Poo
}
</script>
<script src="https://surveymoji.com/api/embed/"></script>

Here’s how it looks:

You can get really creative with this approach:

Or:

Or:


Style

You can style the Surveymoji container as you wish. To do this:

  1. Add a data-styles attribute to your .surveymoji div. Give it a unique value, which will also serve as the name of your style object.
  2. In another <script> element, declare the style object, assigning the corresponding CSS.

Like so:

<div class="surveymoji" data-styles="styles" style="width: 30em;"></div>
<script>
var styles = {
    'border': 'none',
    'background': 'none'
}
</script>
<script src="https://surveymoji.com/api/embed/"></script>

Here’s how it looks:

In this example, the the default border and background color have been removed from the Surveymoji container element.

Last modified on November 25, 2017