Embedding your survey

You can embed any survey into your website by copying and pasting the embed tags in FourEyes. Each embed may be configured to fill any dimensions you need, or whichever theme you would like to use.

Under the "Distribute" menu item, click on "Embed" to find your configuration and tags.

Configuring your embed tags

Size

Embedded surveys will automatically take up 100% width of their container, and automatically resize to the appropriate height to show the whole survey page.

However, if you want your survey to display with specific dimensions you can set a width and/or a height in pixels.

It isn't necessary to specify both dimensions if you only need one or the other.

For example, if you're putting a survey in a side-bar of a website, you might only need to use the width option to ensure that it fits properly in your layout.

Theme

If you'd like to embed your survey with a different theme than that which is currently active on your survey, you can specify a different theme here.

All custom themes you've created/imported will show up, as well as the core themes provided by FourEyes.

Source

You may also optionally indicate a source, which can help you track where you've distributed the survey.

Copy your tags

Click on the grey code box to auto-select the tags, so you can easily copy and paste them (with ctrl+c on Windows, or ⌘+c on OSX).

You can also preview your tags to test out how it looks before you're ready to use them by clcking on the Preview button displayed below the tags themselves.

Advanced usage

In the case where you need to implement a custom solution for triggering the render of a survey, you can split up the pieces of the basic tags into two parts:

The HTML container to insert where you want the survey to appear:

<div class="foureyes-embed" data-survey="f00b4r"></div>

And, the script to trigger loading the survey into the container:

var s = document.createElement("script"); s.async = true; s.type = 'text/javascript';
s.src = 'https://getfoureyes.com/js/embed.js';
s.innerHTML = '{"url":"https://getfoureyes.com/s/"}';
document.appendChild(s);

This is useful for triggering render on a click event, or inside of a modal.

Advanced example

Below is an example implementation of triggering a survey to render on a button click event using jQuery.

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>

    <!-- A button which when clicked will load our survey. -->
    <button type="button" id="loader">Load Survey</button>
    
    <!-- The embed markup which indicates where the survey should load. -->
    <div class="foureyes-embed" data-survey="f00b4r"></div>
    
    <!-- Bind a click event to the button, to load the survey on click. -->
    <script>
    $(function(){
    
        $('#loader').click(function(e){
            var s = document.createElement('script');
            s.async = true; s.type = 'text/javascript';
            s.src = 'https://getfoureyes.com/js/embed.js';
            s.innerHTML = '{"url":"https://getfoureyes.com/s/"}';
            document.body.appendChild(s);
        });
    
    });
    </script>

</body>
</html>

WordPress

We offer a WordPress plugin that allows you to easily embed surveys into a WordPress page or post:

https://wordpress.org/plugins/foureyes/

CONFIGURATION

Create a FourEyes account at https://getfoureyes.com/
Go to the FourEyes link located in the Plugins submenu and launch the ‘Shortcode Generator’.
Create a new WordPress post or page and paste in the generated shortcode.

You can also locate the survey Shortcode Generators here: https://getfoureyes.com/admin/survey/?p=s.wordpress.list