@mxenabled/connect-widget

Connect Widget

This is the UI only for the connect widget. Heavy configuration and an API are needed for this project to work. See usage and props for more details.

Installation

Install using npm package manager:

npm install @mxenabled/connect-widget

Usage

• Install package: npm install --save @mxenabled/connect-widget
• Import the styles import "@mxenabled/connect-widget/dist/style.css"
• Import ApiProvider and ConnectWidget. Add both to your project.
• Pass applicable props to widget and your API to the provider.

import ConnectWidget, { ApiProvider } from '@mxenabled/connect-widget'
import apiService from './apiService' // You custom api service

const App = () => {
  return (
    <ApiProvider apiValue={apiService}>
      <ConnectWidget {...props} />
      {/* See props details below */}
    </ApiProvider>
  )
}

Props

Prop	Type	Description	Default
clientConfig	ClientConfigType	The connect widget uses the config to set the initial state and behavior of the widget. More details	See more details
language	LanguageType	The connect widget supports multiple languages and custom copy. Supported locale options: en, es, and fr-ca.	{ locale: 'en', custom_copy_namespace: '' }
onAnalyticEvent	AnalyticContextType	The connect widget provides a way to track events and pageviews using your own analytics provider. More details	null
onAnalyticPageview	AnalyticContextType	The connect widget provides a way to track events and pageviews using your own analytics provider. More details	null
onPostMessage	PostMessageContextType	The connect widget uses post messages to communicate with the parent window. More details	null
postMessageEventOverrides	PostMessageEventOverrides	These can be used to override the post message events for specific post messages	null
onShowConnectSuccessSurvey	AnalyticContextType	The connect widget provides a way to let your analytics provider know that the connect success survey was shown. More details
onSubmitConnectSuccessSurvey	AnalyticContextType	The connect widget provides a way to submit connect success survey responses using your own analytics provider. More details
profiles	ProfilesTypes	The connect widget uses the profiles to set the initial state of the widget. More details	See more details
userFeatures	UserFeaturesType	The connect widget uses user features to determine the behavior of the widget. More details	See more details
showTooSmallDialog	boolean	The connect widget can show a warning when the widget size is below the supported 320px.	true

ApiProvider

You need to pass an object containing API endpoint callbacks as the apiValue prop of the ApiProvider as described in the usage section for the widget to work. Here is a more detailed list of the API endpoint callbacks.

Development Set Up

• Clone project
• Install Node(with npm). See package.json for current required versions
• Run npm i
• Make your code changes - Follow Conventional Commits
• Run npm run build to build the project
• Link Project
• Test your changes
• Update translations and documentation as needed
• Open Pull Request

Commit Message Requirements

To make commits that trigger a package release, use npx cz, it will launch easy to follow commitizen prompts.

A new MAJOR.MINOR.PATCH release will be generated if at least one of the following types are used, see Conventional Commits Documentation for more specifics.

• fix: -> PATCH bump
• feat: -> MINOR bump

Major bump (any type with a footer of BREAKING CHANGE:)

<any_type>: <message>

BREAKING CHANGE: <description>

Linking for Development

For developing this package locally, we suggest you use npm link to connect your local version of the package to your client app using the package.

• In the npm package root, run npm link.
• Then in your consumer project, run npm link @mxenabled/connect-widget.

This will link the local package to your project in the node modules. Unlink the package when you are finished or if you run into issues.

Contributing

Pull requests are welcome. Please open an issue first to discuss what you would like to change.

Make sure to add/update tests, translations, and documentation as appropriate.

Architecture Decision Records

We have some architecture decision records that outline what is expected when contributing.

Changes

View our notes for each release here