Embeds

External package for Kuest Embeds.

Embeds

1. Market

Runtime config

You can override branding and the site URL by setting globals before loading the bundle:

window.__KUEST_SITE_URL = "https://example.com";
window.__KUEST_SITE_NAME = "Example";
window.__KUEST_SITE_LOGO_URL = "https://example.com/logo.svg";

Gamma and CLOB endpoints are fixed to kuest.com.

Market embed attributes

• market / event: slug lookup.
• via or builder: builder code propagated to the market URL (via, builder).
• affiliate: referral code propagated as r.
• volume="true": show volume label.
• chart="true": show chart block.
• transparent: remove the card background and border.

Theme variables

The market component accepts CSS custom properties on the host element. The main branding hooks are --kuest-card-background, --kuest-card-border-color, --kuest-color-black, --kuest-color-gray-3, --kuest-color-red, --kuest-color-green, and --kuest-chart-line-color.

<kuest-market-embed
    market="market-slug"
    transparent
    style="--kuest-color-black: #f8fafc; --kuest-chart-line-color: #8b5cf6"
></kuest-market-embed>

When window.__KUEST_SITE_NAME is set, the package also registers an alias custom element named ${slug}-market-embed (slugified site name).

Developing

Running the Example

1. Navigate to this package directory

   cd ./packages/embeds

2. Start live server to access local files.

   npx live-server

3. Navigate to the file.

   http://127.0.0.1:8080/example.html

Hot Reload

Running in development mode will allow changes to refresh in real-time. Simply run yarn dev.