Šiuose vadovuose aprašoma, kaip Toimii veiks po paleidimo. Valdymo skydelis ir atsiskaitymas dar neprieinami — Toimii pradės veikti 2026 m.

Įterpk kontaktų formą React, Vue ar Angular

Žiniatinklio komponentai yra DOM dalis. Įmeskite žymę tiesiai į JSX, Vue šablonus ar Angular komponentus — jokio apgaubiančio reikia.

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

Ar tai tikrai veikia?

Taip. Žiniatinklio komponentai yra DOM standarto dalis — React, Vue ir Angular visi atvaizduoja nežinomus žymes kaip paprastą HTML ir leidžia naršyklei perimti. Jokio npm install, jokio apgaubiančio komponento, jokio suderinamumo shimo.

Žingsnis po žingsnio

Įkelti scenarijų

Pridėk scenarijaus žymę į savo programos HTML apvalkalą — public/index.html CRA, app/layout.tsx su next/script Next.js, ar index.html Vite. Arba įkrauk dinamiškai useEffect / onMounted kabliuke.

Įterpkite pasirinktinį elementą

Naudokite pasirinktinį elementų žymę tiesiogiai JSX (<toimii-contact />), Vue šablonuose (<toimii-contact />) ar Angular šablonuose. Naršyklė registruoja elementą, kai įsikrauna scenarijus.

Pasakykite savo freamworkui apie tai

TypeScript naudotojai — deklaruokite žymę global.d.ts faile, kad kompiliatorius ją priimtų. Vue naudotojai — pažymėkite pasirinktinius elementus vite.config.js. Angular naudotojai — pridėkite CUSTOM_ELEMENTS_SCHEMA. Kiekvienas yra vienos eilutės pakeitimas.

Kurti ir paleisti

Paleiskite kūrimo serverį ir forma atvaizduojama. Jokio apgaubiančio, jokio @types paketo, jokio papildomo kūrimo žingsnio.

Dažnos klaidos

React atveju negalima perduoti sudėtingų props (objektų, funkcijų) kaip JSX atributų — komponentas gaus eilutę "[object Object]". Naudokite ref + element.config = {...} po prijungimo.
Strict Mode React 18+ dvigubai prijungia komponentus kūrimo metu. Žiniatinklio komponentai su šalutiniais efektais connectedCallback gali dvigubai suveikti. Toimii komponentai tai tvarko — bet jei rašai savo aplink juos, stebėk tai.
Vue 3 reikia, kad pažymėtum pasirinktinius elementus, kad jis nemėgintų jų spręsti kaip Vue komponentų. Vite.config.js pridėk compilerOptions.isCustomElement atitikti /^toimii-/.
Angular reikia CUSTOM_ELEMENTS_SCHEMA modulio schemas masyve. Be jo kompiliatorius klaidos dėl nežinomos žymės.

Dažnai klausiama

Ar man reikia React/Vue/Angular apgaubiančio komponento?

Ne. Žiniatinklio komponentai yra DOM standarto dalis — React, Vue ir Angular visi atvaizduoja nežinomus žymes kaip paprastą HTML ir leidžia naršyklei perimti. Jokio npm paketo, jokio @types, nieko diegti.

Kaip pasakyti TypeScript apie pasirinktinį elementą?

Taip. Pridėkite tai į global.d.ts failą: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Forma veikia be jo — TypeScript tiesiog nustoja skųstis.

Kaip perduoti props ar konfigūraciją?

Perduokite juos kaip įprastus HTML atributus. Žiniatinklio komponentai skaito atributus iš DOM tokiu pat būdu, kaip React skaito props iš JSX. Dinaminiams reikšmėms naudokite ref ir nustatykite savybes imperatyviai, jei reikia.

Ar veiks su Next.js, Remix ar SvelteKit?

Taip. Next.js atveju pridėk scenarijaus žymę app/layout.tsx (su next/script komponentu) arba pages/_document.tsx. Pasirinktinis elementas atvaizduojamas kliento pusėje — apgaubi jį „use client" ribine sritimi, jei esi App Router.

O kaip su serverio pusės atvaizdavimu?

Pasirinktinis elementas atvaizduojamas kliento pusėje, kaip ir bet kuris žiniatinklio komponentas. SSR išsiunčia žymę, naršyklė registruoja elementą, kai įsikrauna scenarijus, tada atsiranda forma. Trumpa tuščios erdvės dūris — dažniausiai nepastebima.

Įterpiama kitoje platformoje?

Tos pačios dvi kodo eilutės, išskaidytos kiekvienai platformai.

WordPress

Pasirinktinis HTML blokas, Blokų redaktorius arba Klasikinis. Jokio papildinių diegimo. Vienas niuansas — jūsų naudotojo vaidmuo turi turėti unfiltered_html galimybę.

Skaityti visą vadovą

Squarespace

Įkijuokite kodo bloką bet kuriame puslapyje. Reikalauja Core plano (2025 m. Business perkūrimas) arba aukštesnio.

Skaityti visą vadovą

Webflow

Kodo įterpimo elementas talpina iki 50 000 simbolių. Pasirinktinis kodas reikalauja pagrindinio plano arba aukštesnio. Publikuokite, kad pamatytumėte.

Skaityti visą vadovą

Wix

Wix apsaugo įterpimo valdiklį smėlio dėžėje, todėl naudojame išskaidytą metodą — scenarijus nustatymuose → Pasirinktinis kodas, žymė per Įterpti valdiklį. Sąžiningas vadovas.

Skaityti visą vadovą

Shopify

Pridėkite pasirinktinę Liquid sekciją bet kuriai temai — programų diegimo nereikia. Praleiskite atsiskaitymo puslapius, nebent esate Shopify Plus.

Skaityti visą vadovą

Statinės svetainės

Astro, Hugo, 11ty, Jekyll — tos pačios dvi eilutės jūsų išdėstymo šablone. Kūrimai lieka greiti.

Skaityti visą vadovą

HTML / Pasirinktinis

Pakanka paprastos HTML puslapio. Atidaryk bet kuriame teksto redaktoriuje, įklijuok, išsaugok, įkelk. Trys žingsniai ir esi aktyvus.

Skaityti visą vadovą

Pasiruošęs išbandyti?

30 dienų nemokamas bandymas. Kredito kortelės nereikia. Pasiruoši per kelias minutes.

Kredito kortelės nereikia. Pasiruoši per 2 minutes.