Reference

import coverport, { mount, open } from '@coverport/js';
import type { CoverportOptions, MountOptions, CoverportHandle, CoverportSale } from '@coverport/js';

The default export is { mount, open }. Named exports are also available. The script-tag build exposes the same object as window.coverport.

coverport.mount(target, options)

Renders a quote button into target and wires it to open the flow.

function mount(target: string | HTMLElement, options: MountOptions): CoverportHandle;

• target is a CSS selector or an element. Throws if the selector matches nothing.
• If the target is empty, the SDK appends a styled <button class="cp-button"> with options.buttonText.
• If the target already has content (your own button, a link, an icon), it is left untouched and a click listener is attached to it.

Returns a handle:

coverport.open(options)

Opens the modal immediately. Use it from your own event handlers.

function open(options: CoverportOptions): () => void;

Returns a function that closes the modal. Only one modal exists at a time: calling open while one is showing replaces it.

Options

CoverportOptions is accepted by both functions. MountOptions extends it with buttonText.

CoverportSale

Passed to onComplete.

Modal behaviour

• Fixed overlay at z-index: 2147483000, backdrop click and Escape both close it.
• The dialog is role="dialog" aria-modal="true" with an accessible label.
• Frame is 480px wide and min(720px, 92vh) tall; on small screens it fills the viewport minus 16px padding.
• Animations respect prefers-reduced-motion.
• The iframe is created with allow="payment" so the Payment Request API works inside it.

Styling

The SDK injects one <style id="coverport-styles"> block. You can override any of these classes from your own stylesheet; load yours after the SDK or increase specificity.

If you want full control over the button, give the mount target your own markup and the SDK will not render one.

Script-tag data attributes

When loaded via <script src="https://unpkg.com/@coverport/js">, every element with data-coverport-key is mounted on DOMContentLoaded (or immediately if the DOM is already ready). Elements are marked data-coverport-mounted="true" so re-running the script is idempotent.

Callbacks cannot be expressed as attributes. To use onComplete with the script tag, call window.coverport.mount(…) or window.coverport.open(…) yourself instead of relying on auto-mount.

Package details