More Topics

Embedding

Overview

This document explains how to embed a form into your website. Embedding allows a participant to complete the form without leaving your website. To start you will need to choose what kind of embed you would like. The options laid out in the embed section of the launch page for your desired for are; Slideout, Popout, Inline.

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 <ShoutEmbed> button code you can place in 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”

Inline

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

Using the code

As with the Slideout & Popout types the <script> code must be included somewhere in the page. This can be placed in the same place as the Embed Placeholder code.

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

We do not offer any options for styling the inline embed. We suggest to control the width, height, and position by placing it in a styled element. This could also handle scrolling should you want it to.

JavaScript API

If the standard embed button codes or placeholder codes to not suit your needs, you could use the JavaScript API. Read more on this here.