@eventespresso/react-exit-modal-typeform v1.0.4

React Exit Modal for Typeform

This is a react component that provides an embedded typeform for use a exit modal survey. Use-cases are:

• Applications that want to collect information when users cancel a subscription or deactivate a feature in the main app.
• Triggering a Typeform survey from any user action in an application.

The modal that opens has an initial "options" view where the user is presented with two buttons. One to fill out a survey, and another to skip the survey. Skipping the survey will continue on with the original action triggered. If they choose to fill out a survey, then the next view in the modal will present them with an embedded typeform to fill out.

Installation

Install the module

npm install @eventespresso/react-exit-modal-typeform --save

Usage

A very basic usage example (triggering outside react):

1. Importing the component
2. Attaching the modal to the DOM on your trigger action
3. Setting a listener for the custom modal close callback

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import ReactModal from 'react-modal';
import ExitModal, { CLOSE_MODAL_EVENT } from '@eventespresso/react-exit-modal-typeform';

const modalProps = {
    typeFormUrl: 'https://yourtypeformdomain.typeform.com/to/XXXXX'
}

/**
* Element that the modal is anchored to
*/
const modalAnchor = document.getElementById('react-cancel-modal');

let modalComponent = {};

const closeModalCallback = (e) => {
    //do stuff that happens after the modal closes, eg continue with a subscription cancel action etc.
    processSubscriptionCancel();
    //make sure you remove the event listener.
    modalComponent.el.removeEventListener(CLOSE_MODAL_EVENT, closeModalCallback);
};

$('.some-dom-element-trigger-container').on('click', '.element-clicked', function(e) {
   e.preventDefault();
   ReactModal.setAppElement(modalAnchor);
   modalComponent = ReactDOM.render(
       <ExitModal {...modalProps} />,
       modalAnchor
   );
   
   //set listener
   modalComponent.el.addEventListener(
       CLOSE_MODAL_EVENT,
       closeModalCallback,
       false
    );
});

There are a number of properties you can use to control the ExitModal. The only required property is the typeFormUrl property.