Quickstart

This guide walks you through the whole loop: create a collection → add entries → publish → embed on your website. It uses the dashboard for authoring and the embed widget for rendering, the fastest path with zero code on your own site.

Step 1 — Create a collection

Open the Vlozi dashboard → Collections → New collection.

1. Give it a name, e.g. Team Members. A slug (team-members) is generated for you.
2. Choose the cardinality. For a repeating list choose many (the default). Choose single if you want exactly one entry (a hero banner, an About block).
3. Add your fields — for a team page: name (text), photo (image), role (select), and an optional bio (richtext).
4. Save. Copy the Collection ID (looks like col_…). You'll need it to embed.

Step 2 — Add and publish entries

From the collection, Add entry, fill in the fields, and Save. Your new entry starts as a draft — it is not public yet.

When it looks right, click Publish. The entry is now served through the public API and will render in the embed widget as soon as your site rebuilds (or immediately on a plain static page).

Repeat for each team member. Drag to reorder them in the dashboard — this becomes the display order everywhere.

Step 3 — Embed on your website

Add two lines of HTML anywhere on your page — no build step, no dependencies:

<div data-vlozi-collection="YOUR_COLLECTION_ID"></div>
<script src="https://api.vlozi.app/collections/c/embed.js" async></script>

Load the page. The widget fetches your collection's public schema and published entries, and renders them as a card grid — ordered by your manual sort order.

Pick a layout

Add data-vlozi-view to the container to switch layouts:

<div data-vlozi-collection="YOUR_COLLECTION_ID" data-vlozi-view="list"></div>

Supported views: grid (default), list, and table.

Restyle with CSS

Every rendered node carries stable vlzc-* classes and data-vlozi-field / data-vlozi-entry attributes, so you can restyle without touching markup:

.vlzc-card { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.vlzc-title { color: #1a4f8b; }

Full control with a template

For pixel-perfect output, drop a <template data-vlozi-collection-item> inside the container. It is cloned once per entry and {{fieldName}} placeholders are substituted:

<div data-vlozi-collection="YOUR_COLLECTION_ID">
  <template data-vlozi-collection-item>
    <a href="#">
      <img data-vlozi-field="photo" alt="" />
      <h3>{{name}}</h3>
      <span data-vlozi-field="role"></span>
    </a>
  </template>
</div>
<script src="https://api.vlozi.app/collections/c/embed.js" async></script>

Step 4 — Fetch via the raw API instead

Don't want the widget? Fetch the same published data directly — no authentication:

# Published entries
curl "https://api.vlozi.app/collections/c/YOUR_COLLECTION_ID/entries"
 
# The collection's schema
curl "https://api.vlozi.app/collections/c/YOUR_COLLECTION_ID/schema"

Full details, query parameters, and response shapes are in the Public API reference.

Next steps

• Read the Field types to design richer schemas, including relation (link entries to other collections) and group (repeating sub-fields).
• Keep your site in sync automatically with site-sync.
• Learn how content-control and origin restrictions work in Security.