Versions Compared

Key

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

To run Mopinion feedback forms on your website you will have to implement a JavaScript - tag on your website. This article explains how to implement the JavaScript tag without the use of a tag management tool, such as Google Tag Manager.

Step 1

...

: Deploy

After saving and publishing the deployment, get the deployment code by clicking the ‘<>' button at the 'DEPLOY’ window.

...

Step 2

...

: Code

Select the code and copy it or click on the copy code button.

...

Step 3

...

: Place code in HTML

Place the code in the HTML of the page source before the </body> tag. Now the feedback button will appear on the website and you can start collecting feedback.

...

The Mopinion script can be placed on all URLs of a domain , or the specific pages on which you want to deploy the Mopinion feedback forms. There are two possibilities to place the script on a webpage.

In the first case, the JavaScript - tag will be directly placed in the HTML of the page source. The Mopinion code needs to be placed just before the closing body tag: </body>.

The other implementation method is done with a tag manager, for instance: Google Tag Manager. The script will then be injected into the generated source code.
Read more about implementing Mopinion with Google Tag Manager here.

Compared to the first implementation option, the second method is less labour intensive. After all, the script requires only one step and it also offers more flexibility. The implementation of (new) forms on (new) URL’s can be set via the tag manager. One condition for this way of implementation is, of course, the availability of a tag manager.

...

You can find your Mopinion JavaScript tag under : Data collection / Forms / Deployments.

Form appearance

There are three ways the form can appear on a (mobile) website. The form can be shown in a grey, transparent overlay (in a modal) or as a slide-in or the form can be displayed as part of the content and layout of the web page (which is called an embedded form). Additional implementation operations are not required when the form will be shown in a modal.

If a form is an integral element of the content and layout of the page (embedded), an additional < div > (HTML-element) needs to be implemented as well. The < div > is to be placed directly in the body of the HTML or inserted via the tag manager. It is important that the < div > is placed at the exact location in the HTML (DOM) where the form should appear. The div for the embedded forms is <div is

Code Block
<div id="surveyContent"></div>

...

In order to check if the implementation has been done correctly, you can check the version of your Mopinion tag and trigger the form with your browser console. 

...

  • Open the browser development tools. Hotkey The hotkey for most browsers is F12.

  • Select the console.Enter 

  • On the command line, enter:

    Code Block
    srv.openModal(true,'<FORMKEY>')
     on the command line. (

    The <FORMKEY> can be found in the URL of the preview page. See How do I open a Mopinion feedback form with my own button or link? for more details on retrieving the <FORMKEY>.)

  • An overlay should appear on the webpage.

If your tag does not contain the reference to pastease.js, then you are probably running an older version of a Mopinion tag (for example mopinion.min.js). In that case you can trigger it this way: 

  • Open the browser development tools. Hotkey for most browsers is F12.

  • Select the console.

  • Enter Mgo.Mopen() on the command line.

  • An overlay should appear on the webpage.

...

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":""}