Embedding a Project
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.
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 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”
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
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.