Navigation

Adding Fragments and Using Smart Fields

Put working pieces of Zyntro into a page, and name your real assets with @.

Two features that connect a page to the rest of Zyntro rather than to more generated content.

A fragment is a working piece of Zyntro embedded in your page — something a visitor interacts with, drawing on live data. A smart field is a way of naming your own assets inside an instruction, so Webby uses the real thing instead of inventing a placeholder.

Steps

Attach a fragment when adding or editing a section

The section editor has an Attach Fragment picker. Choose the fragment you want, or leave it as None.

Because it is attached as part of the instruction, the section is built around it — an introduction that leads into it, the right amount of space, a sensible heading. That is better than generating a section and inserting something into it afterwards.

Choose how it appears

Two integration modes.

Drop-in places the fragment in the page, in the flow of the section. Use it when interacting with the fragment is the point of that part of the page — a booking calendar on a contact page, a form in a sign-up section.

Modal puts a button in the section that opens the fragment over the page. Use it when the fragment is an option rather than the main event, and you do not want it taking up room until somebody wants it.

Drop-in for the one thing the section exists to do. Modal for everything else.

Pick a modal size that suits the content

Modals come in Medium at 680px, Large at 960px, X-Large at 1200px, and full width.

Match it to what is inside. A short form is fine in a medium; a calendar with a month view needs the room. Too large is as bad as too small — a sparse form stretched across 1200px looks unfinished.

Reference your own assets with @

Any instruction field marked as a smart field responds to @. Typing it offers a menu of things you can reference, and picking one inserts the actual asset.

There is a wide range: a colour, an image, a video, a form, a calendar, a ware, a curated resource, a testimonial, a content piece, an audience segment, a product, a single plan, all plans as a pricing table, and a file.

The gain is precision. Add a section introducing @[your service] for @[your segment] and finish with @[your form] resolves to the real things, so nothing is invented and nothing has to be swapped in later.

@ All Plans is the quick way to a pricing table — it pulls your plans in rather than asking you to describe them.

Check fragments on the published page

A fragment is live and interactive, so test it where it will actually run: open the published page and use it. Submit the form, open the calendar.

The editor shows you a page; the published page is where the fragment is doing its job.

Result

A page that does something rather than only saying something, built from instructions that named your real assets.

Continue Reading

Was this article helpful?

NotebookLM Overviews