Sharing and embedding surveys

When you're ready to start gathering submissions, there are a few ways you can share your survey:

  • Embedding the entire survey in a webpage: each survey has its own embed code, which you can use to integrate the survey into your library website or another webpage.
    • Got LibGuides? You can easily embed a survey using the LibWizard content item -- no need to copy and paste code!
  • Embedding a button widget in a webpage: rather than embed the entire survey inside of a page, you can embed a button widget that will launch the survey inside of a modal window.
  • Visiting the survey's URL: each survey also has its own standalone URL, which you can use to view it directly in your browser. This is great for sharing a link to a survey in an email -- especially if you have given your survey a friendly URL.

There are two ways you can find your survey's embed code and URL: from the workpad (when editing your survey); and from the Surveys page itself.


Viewing a survey's sharing options

Via the workpad

  1. Edit your survey.
  2. Click on the Share/URL button above the workpad.

The Share/URL button above the workpad

Via the Surveys page

  1. Click on Surveys in the command bar.
  2. For the survey you want to share, click on the Form Code (</>) icon in the URL/Code column.

Viewing a form's embed code from the Surveys page 


Sharing options

Direct / Friendly URL

Each survey has its own unique, customizable URL which you can share with patrons. By default, this URL consists of a unique ID number that isn't very memorable (known as the Direct URL). However, you can replace that number with your own custom URL slug, referred to as a Friendly URL.

To easily view and copy your survey's current URL, look no further than the Direct URL/Friendly URL field in the Survey widget code window.

The Friendly URL link

Embedded in page

You can embed the entire content of your survey inside of an another webpage. When using this option, you will be provided with some embed code to insert into your page's HTML. Wherever you place the code is where your survey will display on the page.

When a user visits a page with your embedded survey, it will display inside of an <iframe> element, using the height and width in your Survey Options > Look and Feel settings. (Please note: if you have enabled the LIbAuth Authentication access control for your survey, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the embedded widget may not display.)

To copy the embed code for your survey:

  1. In the Survey Widget Code window, go to the Embedded tab.
  2. If your survey currently has a page header or banner, you can choose to exclude it from the embedded widget by selecting the Do NOT Display Banner Header checkbox.
  3. Click inside the blue text area containing your widget's HTML code. This will automatically copy it to your clipboard.

Options under the Embedded tab

Popup via Button

As an alternative to embedding the entire survey within a page, you can embed a button that launches it inside of a window. When using this option, you will be provided with some embed code to insert into your page's HTML.

When a user clicks the button, a modal window will appear over the current page. Your survey will display inside of an <iframe> element within that window, using the height and width in your Survey Options > Look and Feel settings. (Please note: if you have enabled the LIbAuth Authentication access control for your survey, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the survey may not display inside of the window.)

To copy the embed code for the button widget:

  1. In the Survey Widget Code window, click on the Popup via Button tab.
  2. If your survey currently has a page header or banner, you can choose to exclude it from the widget by selecting the Do NOT Display Banner Header checkbox.
  3. For the Type of Button, select which style of widget you want to create:
    • Button in the page: this will create a button that you can place within your page's content. Wherever you insert your widget's code in the page is where the button will appear.
    • Tab on the side of the screen: this will create a tab that floats along the edge of the window, regardless of where you insert your widget's code.
  4. To customize the button's label, use the Button Text field.
  5. If you selected Tab on the side of the screen, you can customize the side and position of the widget on the screen.
    • To display the button on either side of the window, select Left or Right as the Button Location. Then, use the Button Vertical Position to set how far from the top of the page (in pixels or a percentage) the button will display.
      • For example, a value of 50% will be halfway down the side.
      • Decreasing the value will move it closer to the top, while increasing it will move it closer to the bottom.
    • To display the button along the top or bottom, select Top or Bottom as the Button Location. Then, use the Button Horizontal Position to set how far from the left of the page (in pixels or a percentage) the button will display.
      • For example, a value of 50% will be halfway across the page.
      • Decreasing the value will move it closer to the left, while increasing it will move it closer to the right.
  6. To customize the text color of the button, click inside the Button Text Color field and use the color picker to choose a new one. Or, enter the HEX code value of the color you'd like to use.
  7. To customize the backgroung color of the button, click inside the Button Background Color field and use the color picker to choose a new one. Or, enter the HEX code value of the color you'd like to use.
  8. Click inside the blue text area containing your widget's HTML code. This will automatically copy it to your clipboard.

Options under the Popup via Button tab

Related Articles