CargoLabs Docs

Playground

Generate a ready-to-paste snippet for your key and product.

Fill in your publishable key, pick a product if you want to skip the product picker, and copy the snippet for the integration style you are using.

Integration
Button preview

This is what mount() renders into an empty target. Bring your own markup to style it differently.

import coverport from '@coverport/js';coverport.mount('#insure-btn', {  key: 'pk_test_demo123',  onComplete: (sale) => {    console.log('CoverPort sale', sale.purchaseId, sale.amountTotal / 100, sale.currency);  },  onClose: () => {    console.log('Buyer closed the quote flow');  },});

Keys entered here never leave your browser. The playground only builds text.

Where the values come from

  • Publishable key: developer portal, API Keys. Use a pk_test_ key until you are ready for real charges.
  • Product slug: the slug of the product you want to preselect. Leave it blank to let the buyer choose from everything approved for your key's agent.
  • Your page origin: only needed for the raw iframe path. It becomes the host query parameter and is the origin the flow posts messages to.

Frameworks

Idiomatic examples for React, Next.js, Vue, and plain HTML sites.

Testing

Exercise the whole flow without charging anyone.

On this page

Where the values come from