THIS FEATURE IS CURRENTLY ONLY AVAILABLE UPON REQUEST. GET IN TOUCH WITH US IF YOU WOULD LIKE TO SEE THIS ENABLED.

You can run surveys not only in your project pages, but through other channels, such as your organisation's website, as well.

For this, you will require the Survey or Quick Poll Embed Code, which you can copy via the share function in your survey, and then paste in a page of your choice, just like a YouTube video.

You can then further customise the survey and its appearance to your requirements.

Choosing the right survey

Due to their nature of being embedded in other websites, embedded surveys and quick polls need to be configured a certain way before they are open for submissions. These conditions are:

  1. The Survey must be either in Anyone mode.
  2. The Survey must be PUBLISHED

The visibility of the project is largely ignored. What this means is that you can use a survey or quick poll outside of EHQ even if the project in EHQ is protected. In other words, if you embed a tool or use the standalone link, anyone with the link to either the embed or the standalone tool can access it.

This will allow you to run a survey independently of your project, e.g. if you want the survey to be open, but not necessarily discoverable through EHQ.

The Embed Code

The code snippet will contain of a HTML div and a short script, like so

<div id='ehq-embed-survey'
data-href='https://ehqsurvey.engagementhq.com'
data-project-permalink='13146'
data-project-survey-link='25199'>
</div>

<script type='text/javascript' src='https://bazaar.au.engagementhq.com/static/client/quick-poll.js'></script>

Paste both together wherever you want the survey to appear.

Customising the embed

Various elements in the snippet can be altered to customise your survey. Here are two lists of options, one to control the functionality, the other to control the appearance.

Simply copy any option into the <div> of the embed code like shown in the example below the tables.

Functionality

code snippet

impact

data-hide-progress-bar="true"

Hide the progress bar of the survey

data-hide-question-number="true"

All questions in a survey will by default display a question number automatically. You can hide this.

data-start-year="2015"

data-end-year="2020"

If your survey uses a date question, you can determine the length of possible years shown in the dropdown

data-single-survey-submission="true"

Contrary to surveys in a project page, you can limit the amount of allowed survey submission for anonymous users to one

Appearance

code snippet

impact

data-remove-default-width="true"

By default, the survey will be centered in its container. This may not work for you if your survey is in a small container. You can overwrite this and have the survey appear across the entire width of its container.

data-hide-powered-by="true"

By default, the survey will show a "powered by EngagementHQ" link in the bottom right. You can hide this.

data-lang="en"

Changes the default language of buttons, error messages and other hard-coded elements. Possible options are

  • en for English
  • fr for French
  • cy for Welsh
  • es for Spanish

Appearance advanced

code snippet

impact

data-stylesheet="https://bazaar-btt.firebaseapp.com/main.css"

Link to a stylesheet to overwrite any of the designs in the survey, such as the colour or appearance of buttons

data-locale="

forms.success:Form submitted successfully,

forms.submit:Submit, pagination.next:Next, pagination.previous:Previous, forms.save-error:Sorry we could not submit your response, survey.answered:answered, survey.fetch-error:Sorry could not load data,

survey.thanks-message:Thank you for taking the time to complete this survey, survey.publish-error:This survey is currently not open for submissions"

Using the data-locale, you can control all hard-coded copy in the survey, such as the wording on buttons and error messages.

Adjusting the embed code

Using a couple of snippets from above, we can simply adjust the embed code to customise the tool.

For instance, if we wanted to remove the "powered by EngagementHQ" from the footer and change the language of the survey to French, we copy the two lines into our embed code. The order in which you include any additional snippets is not important.

<div id='ehq-embed-survey'
width='100%' height='600'

data-lang="en"
data-hide-powered-by="true"

data-href='https://ehqsurvey.engagementhq.com'
data-project-permalink='13146'
data-project-survey-link='25199'>
</div>

<script type='text/javascript' src='https://bazaar.replica.bangthetable.in/static/client/survey.js'></script>

Troubleshooting

In general, if nothing shows at all, you may have copied or customised the embed code incorrectly and we recommend you try again.

Did this answer your question?