Embedding
Browser

Setup

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

⚠️

Ensure you substitute in the KOMO_HUB_URL url below. It should look something like https://my-awesome-hub.komo.site/assets/embed/embed.js (opens in a new tab)

<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.

⚠️

Ensure any javascript code calling komoEmbed are in scripts below the setup script.

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 (opens in a new tab).

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.

⚠️

Ensure any javascript code calling komoEmbed are in scripts below the setup script.

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'
});
CouponsReact Native