Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

It is possible to trigger a survey using an existing button or link on the page. To do this, some changes have to be made to the HTML of the page. Additionally, for this survey, you need to set some specific settings in the deployment screen and in the form builder.

The steps

The following steps need to be executed to use your own button or link to trigger a survey.

  •  Update HTML on your page
  •  Set the deployment conditions for this survey
  •  Set and add specific form settings and styling

Update HTML on page

To use your own button or link on a page to trigger a Mopinion survey, this button or link element has to be added to the page and it should call a method provided by the Mopinion survey script: srv.

The srv object

When your page loads and the Mopinion deployment script finds that all conditions set in the deployment editor for your survey are met, then the srv object becomes available on the page. This object contains a number of methods that can be used to execute specific behavior for your survey. The method we are want to use to open a survey with a button is srv.openModal.

Open the form with your own button

To open/show the form with your own button or link you can use: 

Code Block
srv.openModal(true,'formkeyform-key') 

This JavaScript function can be added as an on-click event, for example. 

 You You can add this code to your button:

...

You need to specify it with the form key, which is the unique identifier for that particular feedback form.

Get the form key

You can grab find that key from on the ‘Feedback forms’ Feedback forms page. Click on the icon with the three dots, and click on ‘Copy Copy form key’key.

...

For example, if the form key is 2a8f783514fa91e03666bbb8c444ac4a0b967074, then the full code for a link or button would be:

...

To check if it works you can also run the command from the browser console (right-click: Inspect element and enter the JavaScript function without the HTML tags, so remove <a> and ‘onclick’ event). Like this:

...

Info

Note: The SRV object will only be visible once all specified conditions in the deployment are true. See Why do my conditions show a false-value in my console? for more information.

Info

Note: If a form is initialised proactively or on-page leave, instead of passively by button, it is possible that the above SRV code might not be shown after having been called once before already. This is because a cookie is placed and not all conditions will show a true-value.

...

Set the deployment conditions for this survey

Use the correct trigger conditions

For a survey that you want to trigger using a button or link, the trigger condition needs to be set to Triggered by Button.

Info

We, advice you initialise your form with the ‘Triggered Triggered by button’ button option. Furthermore, it It is also better recommended to not set any other triggers, aside from, if you wantoptionaly, the URL condition so that the survey will always load.

...

 Video walkthrough

...

Hide the Mopinion button

Then additionally, to hide the Mopinion button, go to the feedback form editor. (Replace "app" for your dedicated Mopinion subdomain if needed.)

https://app.mopinion.com/survey/manage -> Edit Form

...

Set and add specific form settings and styling

Set display type

In the form editor set the display type for the survey to either Modal or Slide-in.

...

Then we need to hide the Mopinion button. Because we need to use the Trigger by button deployment condition, a button will show at the side of the screen when the survey loads. We want to hide this default Feedback button because we want to use our own link or button.

Hide the Mopinion button

In the feedback form editor, go to the Design tab, in the sidebar, click on Form and then scroll down to custom CSS

 

...

There Here you add this line, but be sure to replace surveyone of the following lines, depending on the display type. Be sure to replace form-key with the identifier of your particular feedback form. To find the form-key see this article: Where can I find the form-key.

Modal

Code Block
button.btn-open-survey[data-button-for='form-key']{display:none;}

Slide-in

Code Block

button.btn-open-slider[data-button-for='surveyform-key']{display:none;}

Video walkthrough

...

And that's it... You are good to go!

...

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<div id=\"surveyContent\"></div>","javascript":"var confluenceData = {};\nvar pageId;\nvar pageTitle;\n\ntry {\n confluenceData = JSON.parse(parent.window.name);\n var pageId = confluenceData.options.productContext['page.id'];\n var pageTitle = confluenceData.options.productContext['page.title'];\n} catch(e) {}\n\nvar src = 'https://collect.mopinion.com/assets/surveys/2.0/js/survey.min.js';\n\nvar vars = {\n key:'211a4fdb96626776846147095cc335b448e20458', \n domain:'app.mopinion.com', \n divName:'surveyContent', \n button:false, \n use_collect:false, \n useQuerySelectorAll:false\n};\n\nvar s = document.createElement('script');\ns.async = 'async';\ns.id = 'mopinionFeedbackScript';\ns.src = src;\ns.onload = s.onreadystatechange = function() {\n if (!s.readyState || s.readyState === 'loaded' || s.readyState === 'complete') {\n try {\n srv.loadSurvey(vars);\n } catch (e) {}\n }\n}\ndocument.head.appendChild(s);","css":""}