@evaro/connect-sdk

Embeddable Evaro Connect components for third-party sites. The first component is the price checker: the same React component Connect renders on its own product pages, mounted in a Shadow DOM so host page styles never leak in or out.

Choosing an integration

There are two ways to get the SDK onto a page. They ship the same component from the same source, so the choice is only about your build setup:

| | CDN script tag | npm package | |---|---|---| | Best for | Sites without a JS build: WordPress, static HTML, classic themes | React or bundler-based apps | | React | Bundled in (~75 kB gzipped total) | Your app's React (peer dependency) | | Setup | One script tag, no JS to write | npm install + one registration call | | Updates | Automatic with every Connect deploy | Pinned; you upgrade the version yourself | | Types | n/a | Bundled TypeScript declarations |

If you are unsure, start with the CDN script tag. It needs no build and nothing to maintain.

CDN script tag

Add the loader and place the element where the price checker should render. The loader registers <evaro-price-checker> by itself; there is no JavaScript to write:

<script src="https://connect.evaro.com/sdk/loader.js" defer></script>

<evaro-price-checker
  vendor="your-vendor-hash"
  product="product-hash"
  cta-label="Start consultation">
</evaro-price-checker>

Environments

Each Connect environment serves its own loader, and the SDK targets the environment it was loaded from — so loading the development loader automatically points every element at the development APIs:

| Environment | Loader URL | |-------------|-----------| | Production | https://connect.evaro.com/sdk/loader.js | | Staging | https://connect-staging.evaro.com/sdk/loader.js | | Development | https://connect-development.evaro.com/sdk/loader.js |

To override the target without changing the loader URL, set defaults on the script tag — every element on the page inherits them:

<script src="https://connect.evaro.com/sdk/loader.js" defer data-env="staging"></script>

data-env accepts development, staging or production; data-base takes an explicit Connect origin and wins over data-env. Individual elements can still override both with their own env / base attributes.

npm package

For React or bundler-based hosts:

npm install @evaro/connect-sdk

React 18+ and ReactDOM are peer dependencies. Register the custom element once, then place it anywhere in your markup:

import { defineEvaroPriceChecker } from '@evaro/connect-sdk'

defineEvaroPriceChecker()

<evaro-price-checker
  vendor="your-vendor-hash"
  product="product-hash"
  cta-label="Start consultation">
</evaro-price-checker>

React component

React hosts can render the island directly instead of going through the custom element:

import { PriceCheckerIsland } from '@evaro/connect-sdk'

<PriceCheckerIsland
  connectBase="https://connect.evaro.com"
  vendor="your-vendor-hash"
  product="product-hash"
  ctaLabel="Start consultation"
  onVariantChange={data => console.log(data)}
/>

Note that PriceCheckerIsland renders into the host DOM without Shadow DOM isolation, so it expects the host app to carry the required Tailwind styles. Most React hosts should still prefer defineEvaroPriceChecker() for the style isolation.

Element reference

Attributes

| Attribute | Required | Description | |-----------|----------|-------------| | vendor | yes | Your vendor hash | | product | yes | The product hash to price | | cta-label | no | Label for the consultation button. Omit it to render the price checker with no button, for hosts that have their own. | | env | no | development, staging or production. Defaults to the loader's data-env, then the origin the loader was served from, then production. | | base | no | Explicit Connect origin, overrides env |

The element lazy-mounts when it scrolls near the viewport and shows a loading placeholder until the component is ready.

Events

The element emits a bubbling evaro:variant-change event whenever the visitor's selection changes:

document.querySelector('evaro-price-checker').addEventListener('evaro:variant-change', e => {
  console.log(e.detail.variant, e.detail.displayPrice)
})

What it renders

The price checker mirrors Connect exactly: the vendor's theme colours are fetched and applied as CSS variables, and the variant of the checker (standard grid or redesigned accordion) follows the same experiment logic Connect resolves on its own product pages.

The consultation button hands off to the Connect overlay with the selected product and variant. The overlay comes from Connect's existing iframe.js; if the host page doesn't already include it, the SDK loads it on demand when the button is clicked.