React

Is your team using React.js? We've got you covered!

Installation

With NPM

npm install @mycoverai/mca-react-sdk

From CDN

<script src="https://unpkg.com/@mycoverai/mca-react-sdk/dist/umd.js"></script>

Usage

Import in your template and setup your business configuration by supplying your public key. If product_id is not provided or is an empty array, the SDK will display a list of insurance products for the customer to choose from. You can supply an array of strings, where each string represents an insurance product's id, for the user to select from.

//import package
import { Mca } from '@mycoverai/mca-react-sdk'

<Mca
  publicKey="MCAPUBK_TEST|1acf339a-d36f-47e7-8e1b-fd0b86b61b0d"
>
  Buy Insurance
</Mca>

Styling

The Mca component is flexible and lets you add any element as children or parent. To style your CTA, see this example using TailwindCSS:

<Mca
  publicKey="MCAPUBK_TEST|1acf339a-d36f-47e7-8e1b-fd0b86b61b0d"
>
   <button className="w-[300px] h-[56px] bg-green-700 text-white font-medium rounded-md">
       Buy Insurance
    </button>
</Mca>

Next.js

By default, Next uses universal (client-side + server-side) rendering to render your application. Client rendering is opt-in, meaning you have to explicitly decide what components React should render on the client. If you attempt to render the Mca component without using the "use client" directive, it will result in an error. See documentation for more information.

Component props

Prop	Type	Required	Description
productId	Array<string>	No	UID of the product(s). If product_id is not provided or is an empty array, the SDK will display a list of insurance products for the customer to choose from.
publicKey	string	Yes	Your public key. Get it from your Mycover.ai distributor dashboard.
callback	function	No	A function to call once a user completes a purchase.
onClose	function	No	A function to call if the user aborts the process by closing the SDK widget.
form	object	No	Use this prop if you want to initialize the SDK with predefined information from your customer. E.g email, first_name, last_name, etc.
landingUrls	string[]	No	Provide up to 2 optional custom landing page urls after your customers purchase a product or complete a claim.

interface Config {
    productId?: Array<String>
    publicKey: string,
    callback?: () => void,
    onClose?: () => void,
    form?: object,
    landingUrls?: string[];
}