React Form Widget

Portabel React‑widget som kan bäddas in via en enda <script> från en CDN. React packas in i bundlen.

Kom igång

# 1) Klona detta repo och installera
npm install


# 2) Bygg
npm run build


# 3) Testa lokalt
npm run preview # öppna http://localhost:5174 och klicka in i /demo

Publicering via GitHub Release + jsDelivr

1. Committa och tagga en version:

git tag v0.1.0
git push --tags

2. Skapa en GitHub Release som inkluderar byggd dist/ (eller låt en CI bygga och ladda upp artifacts).
3. Bädda in från jsDelivr:

<script src="https://cdn.jsdelivr.net/gh/<ORG>/<REPO>@v0.1.0/dist/form-widget.iife.js"></script>
<div id="min-form-widget"></div>
<script>
FormWidget.mount(document.getElementById('min-form-widget'), {
title: 'Kontaktpreferenser',
subtitle: 'Fyll i och skicka'
});
</script>

Alternativ: publicering via npm + unpkg/jsDelivr

npm publish --access public

Bädda in:

<script src="https://unpkg.com/[email protected]/dist/form-widget.iife.js"></script>
<!-- eller jsDelivr: -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/form-widget.iife.js"></script>

Auto-boot (utan JS‑kod)

Du kan också bara lägga till ett element med attributet data-form-widget så mountas widgeten automatiskt:

<div
  data-form-widget
  data-title="Kontaktpreferenser"
  data-subtitle="Fyll i och skicka"
  data-config-url="/_api/db-config.v1.json"
  data-portal-id="123456"
  data-form-guid="abcdef01-2345-6789-abcd-ef0123456789"
></div>
<script src="https://cdn.jsdelivr.net/.../form-widget.iife.js"></script>

Datadriven dropdown

Sätt data-config-url till en publik JSON-endpoint som returnerar:

{ "version": "v1", "dropdownOptions": ["Val 1", "Val 2"] }

Widgeten hämtar alternativen en gång vid sidladdning. dropdownOptions måste vara en lista av unika strängar. Pågående laddning gör select och submit-knapp inaktiverade och visar texten "Laddar…". Vid fel loggas en varning i konsolen och de inbyggda standardvärdena används.

Versionera URL:en via filnamn eller query‑string (t.ex. /v1.json eller ?v=1) för att cache-busta.

Felsökning: Kolla i webbläsarens Network-panel att JSON-filen hämtas med 200 OK och att inga cookies skickas. Vid problem visas en console.warn i utvecklarkonsolen.

Skicka data till backend

När attributen data-portal-id och data-form-guid anges skickas uppgifterna automatiskt till HubSpots Forms API. Om de utelämnas används fortfarande den simulerade setTimeout‑fördröjningen för enklare felsökning, och det loggade svaret speglar exakt det JSON‑payload som annars hade skickats till HubSpot.

<div
  data-form-widget
  data-portal-id="123456"
  data-form-guid="abcdef01-2345-6789-abcd-ef0123456789"
></div>

Anpassning

• Ändra texter/alternativ direkt i FormWidget.tsx.
• Lägg till props i FormWidgetProps och för vidare till komponenten.
• Styling i src/styles.css. CSS packas ihop av bundlern.

Säker inbäddning

• Bundlen är en IIFE som inte läcker variabler (förutom window.FormWidget API).
• React är inbakat → inga peer‑deps på konsumentens sajt.

---


## Snabbguide för inbäddning på hemsidan
Kopiera in **en** script‑tagg från din CDN, och anropa `FormWidget.mount(...)` eller använd `data-form-widget`‑attributet:
```html
<div id="min-form-widget"></div>
<script src="https://cdn.jsdelivr.net/gh/<ORG>/<REPO>@v0.1.0/dist/form-widget.iife.js"></script>
<script>
FormWidget.mount(document.getElementById('min-form-widget'), {
  title: 'Kontaktpreferenser',
  configUrl: '/_api/db-config.v1.json'
});
</script>