Embedding a Project

Embedding allows respondents to complete your survey, quiz or form without leaving your website. In this article, we'll help you embed surveys on your website, and go over having your project appear as a popup or slideout on the click of a button.

Embedding a form on your website

An inline embedded form will make the form appear part of your page’s content.

To find and use the code to embed your project, follow these steps:

1. Go to the Send section of your form
2. Scroll to Inline Embed
3. Click GET THE CODE
4. Copy the code
5. Paste this onto your web page

The Embed Placeholder <div shout-embed> code should be placed where it is desired for the form to appear in the page’s content.

Dynamic Content / Single Page applications

When using the inline embed the form will be loaded into the placeholder when the page is ready. If your content is dynamically loaded it is necessary to initialise the ShoutEmbed script again so it knows to look for any new embed elements in the page. This can be done with the following JavaScript code.

ShoutEmbed.inline.init();

Styling

Colors and other design elements are controlled via the Builder. You can set a fixed display height for your embed via the Embed options on the send page:

This will change the embed script, so be sure to copy and paste it again if you edit this setting.

JavaScript API

If the standard embed button codes or placeholder codes do not suit your needs, you could use the JavaScript API.

Slideout & Popout

A slideout form will appear over the top of your website sliding from either the left or the right of the page (whichever you choose). On mobile phones, the form will fill the screen. Popouts will have the appearance of a window over your website.

The Button

You can choose how to style the button using our button style selector which is on the launch page. If you choose this could be done using your own CSS. When clicked, this will trigger the form to open.

Using the code

For all embed types, there are two separate codes required to make the embed work. First, you will need to include <script> tag which you should paste exactly as is displayed on the launch page.

It is not important where this goes in your HTML page, however, you should place this where any other scripts on your page are located, this should only be in your code once per page.

If you don’t know where this is you could place it with the button code. The <button shout-button> button code you can place on the page where it is desired to appear.

Close on complete

Slideout and popout types are configured by default to close when the form is complete. If you would not like this behaviour you should add the following attribute to your button code. sh-close-on-complete=”false”