woocommerce/plugins/woocommerce-admin/packages/customer-effort-score
Chi-Hsuan Huang bda55d99f3 Bump package versions (https://github.com/woocommerce/woocommerce-admin/pull/8333) 2022-02-21 11:27:45 +08:00
..
src Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286) 2021-07-14 16:38:57 -04:00
typings Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286) 2021-07-14 16:38:57 -04:00
.npmrc Basic customer effort score survey functionality (https://github.com/woocommerce/woocommerce-admin/pull/5324) 2020-10-30 16:52:52 +10:00
CHANGELOG.md Bump package versions (https://github.com/woocommerce/woocommerce-admin/pull/8333) 2022-02-21 11:27:45 +08:00
README.md Add readme instructions on how to use CustomerEffortScore (https://github.com/woocommerce/woocommerce-admin/pull/6746) 2021-04-07 10:58:01 +10:00
jest.config.json Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286) 2021-07-14 16:38:57 -04:00
package.json Bump package versions (https://github.com/woocommerce/woocommerce-admin/pull/8333) 2022-02-21 11:27:45 +08:00
tsconfig-cjs.json Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286) 2021-07-14 16:38:57 -04:00
tsconfig.json Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286) 2021-07-14 16:38:57 -04:00
webpack.config.js Refactor package style builds (https://github.com/woocommerce/woocommerce-admin/pull/7531) 2021-08-19 10:15:59 -04:00

README.md

Customer Effort Score

WooCommerce utility to measuring user satisfaction.

Installation

Install the module

npm install @woocommerce/customer-effort-score --save

This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

Usage

CustomerEffortScore component

CustomerEffortScore is a React component that can be used to implement your own effort score survey, providing your own logging infrastructure.

This creates a wrapper component around CustomerEffortScore which simply logs responses to the console:

import CustomerEffortScore from '@woocommerce/customer-effort-score';

export function CustomerEffortScoreConsole( { label } ) {
    const onNoticeShown = () => console.log( 'onNoticeShown' );
    const onModalShown = () => console.log( 'onModalShown' );
    const onNoticeDismissed = () => console.log( 'onNoticeDismissed' );
    const recordScore = ( score, comments ) => console.log( { score, comments } );

    return (
        <CustomerEffortScore
			recordScoreCallback={ recordScore }
			label={ label }
			onNoticeShownCallback={ onNoticeShown }
			onNoticeDismissedCallback={ onNoticeDismissed }
			onModalShownCallback={ onModalShown }
			icon={
				<span
					style={ { height: 21, width: 21 } }
					role="img"
					aria-label="Pencil icon"
				>
					✏️
				</span>
			}
        />
    );
};

Use this wrapper component in your code like this:

const MyComponent = function() {
    const [ ceses, setCeses ] = useState( [] );
	
    const addCES = () => {
		setCeses( 
			ceses.concat( 
				<CustomerEffortScoreConsole
					label={ `survey ${ceses.length + 1}` }
					key={ ceses.length + 1 }
				/> 
			) 
		);
	};

    return (
        <>
            { ceses }
            <button onClick={ addCES }>Show new survey</button>
        </>
    );
};