Need juhendid kirjeldavad Toimiit, kui see on töös. Töölaud ja arveldus pole veel saadaval — Toimii käivitub 2026. aastal.

Manusta kontaktivorm Reacti, Vue'sse või Angularisse

Veebikomponendid on osa DOM-ist. Pudista silt otse JSX-i, Vue mallidesse või Angulari komponentidesse — ümbrist pole vaja.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

Kas see tegelikult ka töötab?

Jah. Veebikomponendid on osa DOM-standardist — React, Vue ja Angular renderdavad kõik tundmatud sildid tavalise HTML-ina ja annavad juhtimise brauserile. Ei mingit npm-installi, ümbriskomponenti ega ühilduvuskihti.

Samm-sammult

Lae skript

Lisa skripti silt oma rakenduse HTML-kesta — public/index.html CRA-s, app/layout.tsx koos next/script-iga Next.js-is või index.html Vite's. Või lae see dünaamiliselt useEffect / onMounted hook'is.

Pudista kohandatud element sisse

Kasuta kohandatud elemendi silti otse JSX-is (<toimii-contact />), Vue mallides (<toimii-contact />) või Angulari mallides. Brauser registreerib elemendi skripti laadimisel.

Anna oma raamistikule sellest teada

TypeScripti kasutajad — deklareeri silt global.d.ts-failis, et kompilaator selle aktsepteeriks. Vue kasutajad — märgista kohandatud elemendid failis vite.config.js. Angulari kasutajad — lisa CUSTOM_ELEMENTS_SCHEMA. Igaüks on üherealine muudatus.

Ehita ja käivita

Käivita oma arendusserver ja vorm renderdatakse. Ei mingit ümbrist, @types-paketti ega lisaehitusetappi.

Levinud konarused

Reactis ei saa keerukaid prop'e (objekte, funktsioone) JSX-atribuutidena edastada — komponent saab stringi "[object Object]". Kasuta ref'i + element.config = {...} pärast monteerimist.
React 18+ Strict Mode monteerib komponendid arenduses kaks korda. Veebikomponendid, millel on connectedCallback'is kõrvalmõjud, võivad kaks korda käivituda. Toimii komponendid saavad sellega hakkama — kuid kui kirjutad nende ümber oma koodi, pea seda meeles.
Vue 3 nõuab, et märgistaksid kohandatud elemendid, et see ei püüaks neid Vue komponentidena lahendada. Lisa faili vite.config.js compilerOptions.isCustomElement, mis sobitub mustriga /^toimii-/.
Angular vajab oma mooduli schemas-massiivis CUSTOM_ELEMENTS_SCHEMA-t. Ilma selleta annab kompilaator tundmatu sildi kohta vea.

Korduma kippuvad küsimused

Kas mul on vaja React/Vue/Angulari ümbriskomponenti?

Ei. Veebikomponendid on osa DOM-standardist — React, Vue ja Angular renderdavad kõik tundmatud sildid tavalise HTML-ina ja annavad juhtimise brauserile. Ei mingit npm-paketti, @types-i ega midagi installida.

Kuidas annan TypeScriptile kohandatud elemendist teada?

Jah. Lisa see global.d.ts-faili: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Vorm töötab ka ilma selleta — TypeScript lihtsalt lõpetab nurisemise.

Kuidas edastan prop'e või konfiguratsiooni?

Edasta need tavaliste HTML-atribuutidena. Veebikomponendid loevad atribuute DOM-ist samamoodi, nagu React loeb prop'e JSX-ist. Dünaamiliste väärtuste jaoks kasuta ref'i ja sea vajadusel omadused imperatiivselt.

Kas see töötab Next.js, Remixi või SvelteKitiga?

Jah. Next.js-is lisa skripti silt faili app/layout.tsx (next/script komponendiga) või faili pages/_document.tsx. Kohandatud element renderdatakse kliendi poolel — mässi see "use client" piiri sisse, kui kasutad App Routerit.

Aga serveripoolne renderdamine?

Kohandatud element renderdatakse kliendi poolel, nagu iga veebikomponent. SSR väljastab sildi, brauser registreerib elemendi skripti laadimisel ja siis ilmub vorm. Tühi ala vilksatab hetkeks — tavaliselt märkamatult.

Lisad mõnele teisele platvormile?

Sama kaks rida koodi, igale platvormile eraldi lahti seletatud.

WordPress

Custom HTML plokk, Block-redaktor või Classic. Lisandmooduli paigaldamist pole vaja. Üks konks — sinu kasutajaroll vajab unfiltered_html õigust.

Loe täielikku juhendit

Squarespace

Pudista ükskõik millisele lehele Code Block. Nõuab Core paketti (2025. aasta Business'i ümbernimetus) või kõrgemat.

Loe täielikku juhendit

Webflow

Code Embed element mahutab kuni 50 000 märki. Kohandatud kood eeldab vähemalt Basic-paketti. Tulemuse nägemiseks avalda leht.

Loe täielikku juhendit

Wix

Wix isoleerib Embed-vidina liivakasti, seega kasutame jagatud meetodit — skript kohta Settings → Custom Code, silt vidina Embed a Widget kaudu. Aus juhend.

Loe täielikku juhendit

Shopify

Lisa ükskõik millisesse teemasse Custom Liquid sektsioon — rakenduse installi pole vaja. Jäta kassalehed vahele, kui sul pole Shopify Plusi.

Loe täielikku juhendit

Staatilised saidid

Astro, Hugo, 11ty, Jekyll — needsamad kaks rida sinu paigutusmalli. Ehitused jäävad kiireks.

Loe täielikku juhendit

HTML / Kohandatud

Tavalisest HTML-lehest piisab. Ava see suvalises tekstiredaktoris, kleebi, salvesta, lae üles. Kolm sammu ja oledki eetris.

Loe täielikku juhendit

Valmis proovima?

30-päevane tasuta prooviperiood. Krediitkaarti pole vaja. Valmis mõne minutiga.

Krediitkaarti pole vaja. Seadistus 2 minutiga.