react-mopinion-forms/README.md

A React component for Mopinion Feedback Forms for web

# 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](https://app.mopinion.com/account/sign-up) or read more about [Mopinion for Websites](https://mopinion.com/product/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'.

![Mopinion Feedback Forms page](https://mopinion.com/wp-content/uploads/2021/08/Feedback-forms-Mopinion.png)
> Get the form key from the feedback forms page