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:
- Go to the Send section of your form
- Scroll to Inline Embed
- Click GET THE CODE
- Copy the code
- 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.
If you're using a Content Management System like WordPress or Wix, you'll need to place a HTML element onto the page, and paste the embed script into this.
Dynamic Content / Single Page applications
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.
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 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”