Skip to Content
EmbeddingBrowser

Setup

Include the following script element in your HTML, substituting in the domain your Komo hub is hosted on:

<script> (function(n,r,t,c,u,e,f){ n[u]=n[u]||function(q){return new Proxy(q,{ get(y,s){return s==="q"?y[s]||[]: function(...B){(n[u].q=n[u].q||[]).push([s,...B])}}}) }({}); e=r.createElement(t);f=r.getElementsByTagName(t)[0]; e.async=1;e.src=c;f.parentNode.insertBefore(e,f); })(window,document,"script","https://KOMO_HUB_URL/assets/embed/embed.js","komoEmbed"); </script>

Cards

Cards can be embedded in 3 ways.

Card Covers

Card covers are an image or image & button which will launch the card experience in a full page modal. To setup a card cover have a HTML element marked with 2 data attributes. The first is data-komo-embed-card-cover. This let’s our embed code know that what to look for. The second is data-komo-embed. This holds data for which card and styling options. When the embed code loads, it will find all elements with data-komo-embed-card-cover and replace the element with the card cover. Clicking the cover will load the card in a full-page modal.

Code

Replace CARD_ID with yours

<div data-komo-embed-card-cover data-komo-embed='{"cardId":"CARD_ID","styles":{"embedStyle": "ImageButton","embedWidth": "unset"}}' > </div>
Live Example

Card Triggers

Card triggers allow you to mark any HTML element as a card trigger. A card trigger will launch the card experience in a full page modal when clicked. To setup an element as a card trigger, simply add data-komo-embed-card-trigger={CARD_ID} as an attribute. When the embed code loads, it will find all elements with data-komo-embed-card-trigger and add an on click handler to load the card in a full-page modal.

Code

Replace CARD_ID with yours

<button class="bg-yellow-500 hover:bg-yellow-400 text-black font-bold py-2 px-4 rounded" data-komo-embed-card-trigger="CARD_ID" > Show me Komo! </button>
Live Example

Javascript

Once the setup script is loaded, you will have access to the komoEmbed javascript object. This can be used to programmatically register card triggers or open a card experience directly.

Code

Replace CARD_ID with yours

/** * Registers a card trigger to open a Komo card when the specified element is clicked. * * @param {string} cardId - The unique identifier of the card you want to display. * @param {string} domSelector - A DOM selector string to select the trigger element(s). */ komoEmbed.registerCardTrigger("CARD_ID", "#yourElementId");

A domSelector is a DOM selector used to locate elements in your document. You can learn more about DOM selectors here.

Replace CARD_ID with yours

/** * Opens the specified card experience in a full screen modal. */ komoEmbed.openExperience({ type: "card", id: "CARD_ID"});

Form Prefilling

Any form within an experience can be prefilled in the embed experience. We can accomplish this in 2 ways.

URL Query Parameters

Form fields on cards can be pre-filled with information based on the query string parameters in a given URL (learn more).

Javascript

Once the setup script is loaded, you will have access to the komoEmbed javascript object. This can be used to programmatically prefill forms.

Code

/** * Sets a prefill value for a specific form field. * @param {string} fieldName - The name of the form field to prefill. * @param {string} value - The value to prefill the form field with. */ komoEmbed.setFormPrefillValue('email', 'user@example.com'); /** * Sets prefill values for multiple form fields at once. * @param {Record<string, string>} values - An object containing key-value pairs * where the key is the form field name and the value is the prefill value. */ komoEmbed.setFormPrefillValues({ first_name: 'John', last_name: 'Doe', email: 'john.doe@example.com' });