Guides

Embedding the widget

Every adapter renders the same iframe. Pick the one that matches your stack and paste it. Swap the demo key for your own and set the country for your market, the visitor's typed address handles the rest. To pin a default location, see Customizing.

Pick your stack

Each tab below is a complete, copy-paste block: plain HTML, the <solar-widget> web component, React, Vue, Svelte, WordPress, Drupal, and Shopify.

<iframe
  src="https://solarapi-api.157.90.161.30.sslip.io/embed?key=&kwp=4&country=GB&tilt=35"
  style="width:100%;max-width:480px;height:560px;border:0;border-radius:16px"
  loading="lazy"
  allow="geolocation"
></iframe>
<!-- one line, once per page: auto-resizes the widget to its content -->
<script src="https://solarapi-api.157.90.161.30.sslip.io/widget.js" async></script>

Paste anywhere. The widget.js line auto-resizes the iframe to its content (add it once per page). Prefer a fixed box that scrolls inside? Add &size=fixed to the URL and keep your own height.

The auto-resizer

Add this one line once per page. It listens for the widget's height and grows the iframe so nothing scrolls inside the box. Drop it and the iframe keeps the height you gave it, scrolling its own content.

widget.js

<script src="https://solarapi-api.157.90.161.30.sslip.io/widget.js" async></script>

To force the fixed-height behaviour even with widget.js loaded, add &size=fixed to the iframe URL. See Customizing the widget.

Notes per adapter

Web component: load @solar-api/embed once, then use <solar-widget> anywhere, including Wix, Squarespace, and Webflow.
React / Vue / Svelte: install @solar-api/react, @solar-api/vue, or @solar-api/svelte. Each forwards solar:estimate and solar:lead_captured as native events.
WordPress: install the Solar Widget plugin, then paste [solar_widget key="..."] into any page.
Drupal / Shopify: enable the module or theme app block, then set your key and location in the block config. No theme code.