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