A React component for Mopinion Feedback Forms

A React component for Mopinion Feedback Forms. A way for developers to easily integrate Mopinion Feedback Forms directly their React app.

Not using Mopinion for Websites yet? Sign up for a free trial now or read more about Mopinion for Websites.

How to use

Install React Mopinion Forms.

npm install react-mopinion-forms

Insert a form wherever you wish inside your applications JSX.

A basic example:

import React, { Component } from 'react';
import MopinionForm from 'react-mopinion-forms';

export default class App extends Component {
    
    render() {
        return (
            <div>
                <MopinionForm formKey={'64624ca4b7c18e9f4cdcd422d41615989d9034b2'} />
            </div>
        )
    }
}

MopinionForm props

{
    //A string describing the form you wish to trigger (copy this from the form list page) - required
    formKey:'64624ca4b7c18e9f4cdcd422d41615989d9034b2',

    //A string to set the mopinion domain used - required when using a custom domain, defaults to app.mopinion.com
    domain:'app.mopinion.com',

    //A string path pointing to a custom location for the mopinion-forms file - optional
    file:'https://your-website.com/mopinion.survey.js',

    //Callback function called when a form has been fully submitted - optional
    onSubmit:e => {
        //'e' contains the following
        {
            event:'feedback_sent',
            key:'the form key',
            formName:'the form name',
            feedback:[{an array of objects containing all feedback elements}] 
        }
    },

    //The following props only work with MODAL or SLIDE-IN type forms

    //Boolean for hiding or showing a feedback button - optional, defaults to true
    showButton:true,
    
    //Boolean for forcing a form to open after loading - optional
    forceOpen:false,
}

Getting the formKey

To find the required formKey from the form you want to inject, navigate to https://app.mopinion.com/r/data-collection/survey (or your custom domain). Click on the 'more' icon on a feedback form card (the three dots icon) and click 'Copy form key'.

Get the form key from the feedback forms page