Using Claude Code with ZORALI

A workflow, not an integration

Claude Code doesn't plug into ZORALI directly, and it doesn't need to. The workflow is simple: describe the component you want, let Claude Code write the HTML, CSS, and JavaScript, then paste it into a ZORALI custom code block or embed. You get bespoke interactivity inside a visually managed site.

Claude Code: writes bespoke components and interactions
ZORALI: hosts them via custom code blocks and embeds
No plugins or connectors, copy, paste, preview, publish
Ideal for developers who want code-level control in specific spots

What to have Claude Code build

Aim Claude Code at the things ZORALI's visual elements don't cover: pricing calculators, product configurators, custom form logic, scroll-driven animations, data visualizations, embedded dashboards. Keep components self-contained, their own markup, styles, and script, so they drop cleanly into an embed.

Interactive widgets: calculators, quizzes, configurators
Bespoke animations: scroll effects, custom cursors, marquees
Data displays: charts, tables, and live-fed visualizations
Third-party integrations: custom embeds for external services

How to prompt for embed-ready code

The trick is asking for code shaped for embedding: self-contained, namespaced styles that won't leak into the page, no build step, no external dependencies beyond a CDN link or two. Tell Claude Code the component will live inside a larger page via an embed, with a fixed container it should fill. Review the output for style collisions before pasting.

Ask for self-contained markup, styles, and script in one file
Require namespaced or scoped CSS to avoid page-wide leaks
Avoid build steps, the embed should run as pasted
Specify the container size so the component fits its slot

Assemble on the ZORALI canvas

Paste the component into a custom code block, position it on the freeform canvas like any other element, and design around it, headlines above, supporting sections below, ZORALI's native animations on the surrounding elements. Preview the full page to confirm the embed behaves inside the real layout, then publish.

Embeds sit on the canvas like native elements
Design the surrounding page visually around coded components
Preview code and canvas together before publishing
Iterate: tweak prompts, regenerate, re-paste in minutes

Ship it to your domain

When the page looks right, publish to your custom domain like any ZORALI site. The coded components ship as part of the page, no separate deployment. Multi-site hosting means you can run a whole portfolio of Claude Code-enhanced sites from one account.

Coded embeds publish as part of the page, one deployment
Custom domains supported on Pro ($19/mo) and Business ($49/mo)
Multi-site hosting included for client and personal projects
Starter plan is free, prototype the workflow before paying

Start building free →