Þessar leiðbeiningar lýsa Toimii eftir að þjónustan fer í loftið. Mælaborðið og innheimta eru ekki enn tiltæk — Toimii fer í loftið árið 2026.

Fella inn sambandaform í React, Vue eða Angular

Vefhlutir eru hluti af DOM. Slepptu merkinu beint í JSX, Vue-sniðmát eða Angular-einingar — engin hjúpun þarf.

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

Virkar þetta í raun?

Já. Vefhlutir eru hluti af DOM-staðlinum — React, Vue og Angular birta öll óþekkt merki sem venjulegt HTML og láta vafrann taka við. Engin npm-uppsetning, engin hjúpunareining, engin samhæfnishlið.

Skref fyrir skref

Hladdu skriftið

Bættu script-merkinu við HTML-skel forritsins þíns — public/index.html í CRA, app/layout.tsx með next/script í Next.js, eða index.html í Vite. Eða hladdu því inn á kvikan hátt í useEffect / onMounted-krók.

Settu sérsniðna eininguna inn

Notaðu sérsniðna einingamerkið beint í JSX (<toimii-contact />), Vue-sniðmátum (<toimii-contact />) eða Angular-sniðmátum. Vafrinn skráir eininguna þegar skriftið hleðst.

Segðu rammanum þínum frá því

TypeScript-notendur — lýstu yfir merkinu í global.d.ts-skrá svo þýðandinn samþykki það. Vue-notendur — merktu sérsniðnar einingar í vite.config.js. Angular-notendur — bættu við CUSTOM_ELEMENTS_SCHEMA. Allt er ein-línu breyting.

Smíðaðu og keyrðu

Keyrðu þróunarþjóninn og formið birtist. Engin hjúpun, enginn @types-pakki, engin aukin smíðiskref.

Algeng gildrur

Í React getur þú ekki sent flókin props (hluti, föll) sem JSX-eigindir — einingin fær strenginn „[object Object]". Notaðu ref + element.config = {...} eftir mount.
Strict Mode í React 18+ tvífestir einingar í þróun. Vefhlutir með hliðarverkanir á connectedCallback gætu keyrt tvisvar. Toimii-einingar meðhöndla þetta — en ef þú skrifar þínar eigin utan um þær skaltu gæta þín.
Vue 3 þarf þig til að merkja sérsniðnar einingar svo það reyni ekki að leysa þær sem Vue-einingar. Í vite.config.js skaltu bæta við compilerOptions.isCustomElement sem passar /^toimii-/.
Angular þarf CUSTOM_ELEMENTS_SCHEMA í schemas-fylki einingarinnar. Án þess gefur þýðandinn villu vegna óþekkts merkis.

Oft spurð

Þarf ég hjúpunareiningu fyrir React/Vue/Angular?

Nei. Vefhlutir eru hluti af DOM-staðlinum — React, Vue og Angular birta allar óþekktar merki sem venjulegt HTML og láta vafrann taka við. Engin npm-pakki, engin @types, ekkert að setja upp.

Hvernig kynni ég TypeScript fyrir sérsniðna eininganum?

Já. Bættu þessu við global.d.ts-skrá: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Formið virkar án þess — TypeScript hættir bara að kvarta.

Hvernig sendi ég props eða stillingar?

Sendu þær sem venjulegar HTML-eigindir. Vefhlutir lesa eigindir úr DOM á sama hátt og React les props úr JSX. Fyrir kvikt gildi skaltu nota ref og stilla eiginleika á beinu takmarki ef þörf er á.

Virkar þetta með Next.js, Remix eða SvelteKit?

Já. Í Next.js skaltu bæta script-merkinu við app/layout.tsx (með next/script-einingunni) eða í pages/_document.tsx. Sérsniðna einingin birtist á biðlarahlið — settu hana í „use client"-mörk ef þú ert í App Router.

Hvað með þjónahlið-birtingu?

Sérsniðna einingin birtist á biðlarahlið, eins og allir vefhlutir. SSR gefur frá sér merkið, vafrinn skráir eininguna þegar skriftið hleðst, síðan birtist formið. Það verður stuttur auður reitur — venjulega ómerkanlegur.

Ert þú að fella inn á annan vettvang?

Sömu tvær línur af kóða, útfærðar fyrir hverja vettvang.

WordPress

Custom HTML-blokkur, blokkaritill eða klassískt. Engin viðbótauppsetning. Ein gildra — notandahlutverk þitt þarf unfiltered_html-heimild.

Lesa allar leiðbeiningar

Squarespace

Slepptu kóðablokk á hvaða síðu sem er. Krefst Core-áskriftar (2025-endurnefning á Business) eða hærri.

Lesa allar leiðbeiningar

Webflow

Code Embed-einingin ræður 50.000 stafi. Sérsniðinn kóði krefst Basic-áskriftar eða hærri. Birtu til að sjá.

Lesa allar leiðbeiningar

Wix

Wix sandkassast Embed-widget, þannig að við notum skiptaaðferð — skrift í Settings → Custom Code, merki í gegnum Embed a Widget. Heiðarleg leiðbeining.

Lesa allar leiðbeiningar

Shopify

Bættu Custom Liquid-hluta við hvaða þema sem er — engin forritauppsetning þarf. Slepptu greiðslugáttarsíðum nema þú sért með Shopify Plus.

Lesa allar leiðbeiningar

Kyrrstæðar síður

Astro, Hugo, 11ty, Jekyll — sömu tvær línurnar í útlitssniðmátið. Smíðarnar haldast hraðar.

Lesa allar leiðbeiningar

HTML / Sérsniðið

Venjuleg HTML-síða dugar. Opnaðu í hvaða textaritli sem er, límdu inn, vistaðu, hladdu upp. Þrjú skref og þú ert búinn.

Lesa allar leiðbeiningar

Tilbúinn að prófa?

30 daga ókeypis prufa. Ekkert kreditkort. Tilbúið á mínútum.

Ekkert kreditkort nauðsynlegt. Tilbúið á 2 mínútum.