These guides describe Toimii once it's live. The dashboard and billing aren't available yet — Toimii launches in 2026.

Embed a contact form in React, Vue, or Angular

Web components are part of the DOM. Drop the tag straight into JSX, Vue templates, or Angular components — no wrapper needed.

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

Does this actually work?

Yes. Web components are part of the DOM standard — React, Vue, and Angular all render unknown tags as plain HTML and let the browser take over. No npm install, no wrapper component, no compatibility shim.

Step by step

Load the script

Add the script tag to your app's HTML shell — public/index.html in CRA, app/layout.tsx with next/script in Next.js, or index.html in Vite. Or load it dynamically in a useEffect / onMounted hook.

Drop in the custom element

Use the custom element tag directly in JSX (<toimii-contact />), Vue templates (<toimii-contact />), or Angular templates. The browser registers the element when the script loads.

Tell your framework about it

TypeScript users — declare the tag in a global.d.ts file so the compiler accepts it. Vue users — flag custom elements in vite.config.js. Angular users — add CUSTOM_ELEMENTS_SCHEMA. Each is a one-line change.

Build and run

Run your dev server and the form renders. No wrapper, no @types package, no extra build step.

Common gotchas

In React, you can't pass complex props (objects, functions) as JSX attributes — the component will receive the string "[object Object]". Use a ref + element.config = {...} after mount.
Strict Mode in React 18+ double-mounts components in dev. Web components with side effects on connectedCallback may double-fire. Toimii's components handle this — but if you write your own around them, watch for it.
Vue 3 needs you to flag custom elements so it doesn't try to resolve them as Vue components. In vite.config.js, add compilerOptions.isCustomElement to match /^toimii-/.
Angular needs CUSTOM_ELEMENTS_SCHEMA in your module's schemas array. Without it, the compiler errors on the unknown tag.

Frequently asked

Do I need a React/Vue/Angular wrapper component?

No. Web components are part of the DOM standard — React, Vue, and Angular all render unknown tags as plain HTML and let the browser take over. No npm package, no @types, nothing to install.

How do I tell TypeScript about the custom element?

Yes. Add this to a global.d.ts file: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. The form works without it — TypeScript just stops complaining.

How do I pass props or config?

Pass them as regular HTML attributes. Web components read attributes from the DOM the same way React reads props from JSX. For dynamic values, use a ref and set properties imperatively if needed.

Does it work with Next.js, Remix, or SvelteKit?

Yes. In Next.js, add the script tag in app/layout.tsx (with the next/script component) or in pages/_document.tsx. The custom element renders client-side — wrap it in a "use client" boundary if you're in the App Router.

What about server-side rendering?

The custom element renders client-side, like any web component. SSR emits the tag, the browser registers the element when the script loads, then the form appears. There's a brief flash of empty space — usually unnoticeable.

Embedding on a different platform?

Same two lines of code, picked apart for each platform.

WordPress

Custom HTML block, Block Editor or Classic. No plugin install. One catch — your user role needs the unfiltered_html capability.

Read the full guide

Squarespace

Drop a Code Block on any page. Requires the Core plan (2025 rename of Business) or higher.

Read the full guide

Webflow

The Code Embed element holds up to 50,000 characters. Custom code requires the Basic plan or above. Publish to preview.

Read the full guide

Wix

Wix sandboxes the Embed widget, so we use a split method — script in Settings → Custom Code, tag via Embed a Widget. Honest guide.

Read the full guide

Shopify

Add a Custom Liquid section to any theme — no app install required. Skip checkout pages unless you're on Shopify Plus.

Read the full guide

Static Sites

Astro, Hugo, 11ty, Jekyll — same two lines in your layout template. Builds stay fast.

Read the full guide

HTML / Custom

A plain HTML page is enough. Open it in any text editor, paste, save, upload. Three steps and you're live.

Read the full guide

Ready to try it?

30-day free trial. No credit card. Set up in minutes.

No credit card required. Set up in 2 minutes.