Šajos ceļvežos aprakstīts, kāds Toimii būs pēc palaišanas. Vadības panelis un norēķini vēl nav pieejami — Toimii tiks palaists 2026. gadā.

Iestrādāt kontaktu veidlapu React, Vue vai Angular

Tīmekļa komponenti ir daļa no DOM. Iestati tagu tieši JSX, Vue veidnēs vai Angular komponentēs — nav nepieciešams apvalks.

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

Vai tas tiešām darbojas?

Jā. Tīmekļa komponenti ir daļa no DOM standarta — React, Vue un Angular visi renderē nezināmos tagus kā parastu HTML un ļauj pārlūkprogrammai pārņemt kontroli. Nav npm install, nav apvalka komponenta, nav saderības shim.

Soli pa solim

Ielādē skriptu

Pievieno skripta tagu savas lietotnes HTML apvalkam — public/index.html CRA, app/layout.tsx ar next/script Next.js, vai index.html Vite. Vai ielādē to dinamiski useEffect / onMounted āķī.

Iestati pielāgoto elementu

Izmanto pielāgotā elementa tagu tieši JSX (<toimii-contact />), Vue veidnēs (<toimii-contact />) vai Angular veidnēs. Pārlūkprogramma reģistrē elementu, kad skripts ielādējas.

Pastāsti savai sistēmai par to

TypeScript lietotāji — deklarē tagu global.d.ts failā, lai kompilators to pieņemtu. Vue lietotāji — atzīmē pielāgotos elementus vite.config.js. Angular lietotāji — pievieno CUSTOM_ELEMENTS_SCHEMA. Katrs ir vienas rindiņas izmaiņas.

Veido un palaid

Palaid savu izstrādes serveri un veidlapa tiek renderēta. Nav apvalka, nav @types pakotnes, nav papildu veidošanas soļa.

Biežās kļūdas

React nevar padot sarežģītus props (objektus, funkcijas) kā JSX atribūtus — komponents saņems virkni "[object Object]". Izmanto ref + element.config = {...} pēc montāžas.
Strict Mode React 18+ divreiz montē komponentus izstrādē. Tīmekļa komponentiem ar blakusefektiem uz connectedCallback var divreiz izsaukties. Toimii komponenti to apstrādā — bet ja raksti savus ap tiem, uzmanies.
Vue 3 prasa atzīmēt pielāgotos elementus, lai tas nemēģina tos atrisināt kā Vue komponentus. vite.config.js pievieno compilerOptions.isCustomElement, kas atbilst /^toimii-/.
Angular prasa CUSTOM_ELEMENTS_SCHEMA moduļa schemas masīvā. Bez tā kompilators kļūdīsies uz nezināmā taga.

Biežāk uzdotie jautājumi

Vai man nepieciešams React/Vue/Angular apvalka komponents?

Nē. Tīmekļa komponenti ir daļa no DOM standarta — React, Vue un Angular visi renderē nezināmos tagus kā parastu HTML un ļauj pārlūkprogrammai pārņemt kontroli. Nav npm pakotnes, nav @types, nekas nav jāinstalē.

Kā pastāstīt TypeScript par pielāgoto elementu?

Jā. Pievieno to global.d.ts failam: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Veidlapa darbojas bez tā — TypeScript vienkārši pārtrauks sūdzēties.

Kā padot props vai konfigurāciju?

Padod tos kā parastos HTML atribūtus. Tīmekļa komponenti lasa atribūtus no DOM tādā pašā veidā kā React lasa props no JSX. Dinamiskām vērtībām izmanto ref un imperatīvi iestati īpašības pēc vajadzības.

Vai tas darbojas ar Next.js, Remix vai SvelteKit?

Jā. Next.js, pievieno skripta tagu app/layout.tsx (ar next/script komponentu) vai pages/_document.tsx. Pielāgotais elements tiek renderēts klienta pusē — ietver to "use client" robežā, ja esi App Router.

Kā ar serverpuses renderēšanu?

Pielāgotais elements tiek renderēts klienta pusē, kā jebkurš tīmekļa komponents. SSR izstaro tagu, pārlūkprogramma reģistrē elementu, kad skripts ielādējas, tad veidlapa parādās. Ir īsa tukšas vietas mirklī — parasti nemanāma.

Iestrādā citā platformā?

Tās pašas divas koda rindiņas, izklāstītas katrai platformai.

WordPress

Custom HTML bloks, Block Editor vai Classic. Nav nepieciešama spraudņa instalēšana. Viens brīdinājums — tavam lietotāja lomam nepieciešama unfiltered_html iespēja.

Lasīt pilno rokasgrāmatu

Squarespace

Nomet Code Block jebkurā lapā. Prasa Core plānu (2025 pārdēvēts no Business) vai augstāku.

Lasīt pilno rokasgrāmatu

Webflow

Code Embed elements var saturēt līdz 50 000 rakstzīmju. Pielāgots kods prasa Basic plānu vai augstāku. Publicē, lai priekšskatītu.

Lasīt pilno rokasgrāmatu

Wix

Wix smilškastu izmanto Embed logrīkam, tāpēc izmantojam sadalīto metodi — skripts Iestatījumos → Pielāgots kods, tags ar Embed a Widget. Godīgs ceļvedis.

Lasīt pilno rokasgrāmatu

Shopify

Pievieno Custom Liquid sekciju jebkurai tēmai — nav nepieciešama lietotnes instalēšana. Izlaist norēķinu lapas, ja neesi uz Shopify Plus.

Lasīt pilno rokasgrāmatu

Statiskās vietnes

Astro, Hugo, 11ty, Jekyll — tās pašas divas rindiņas tavā izkārtojuma veidnē. Veidošana paliek ātra.

Lasīt pilno rokasgrāmatu

HTML / Pielāgots

Pietiek ar parastu HTML lapu. Atver tekstredaktorā, ielīmē, saglabā, augšupielādē. Trīs soļi — un esi aktīvs.

Lasīt pilno rokasgrāmatu

Gatavs izmēģināt?

30 dienu bezmaksas izmēģinājums. Nav kredītkartes. Uzstādīšana — minūtēs.

Kredītkarte nav nepieciešama. Uzstādīšana — 2 minūtēs.