Take it further
Bynli Blocks
Mix dynamic team data into the static HTML of your team site — your team name, your logo, a contact email, and shared headers — without writing any code or running anything on the server.
.html in your site's editor goes through Bynli Blocks
automatically. Static assets (images, CSS, JS) are unchanged.
The three tags
Bynli Blocks adds three small things to plain HTML:
| Tag | What it does |
|---|---|
{{ variable }} |
Drops a value into the page (your team name, logo URL, etc.) |
{% include "file.html" %} |
Splices another file from your site into this one |
{# comment #} |
A note to yourself; never appears on the live site |
Variables you can use today
| Variable | What it is |
|---|---|
{{ team.name }} | Your team's display name |
{{ team.slug }} | The short identifier in your Bynli URLs |
{{ team.description }} | Your team's description (from team settings) |
{{ team.logo_url }} | Path to your uploaded team logo |
{{ team.contact_email }} | The email address on file for your team |
Bynli always escapes these values for HTML safety. You can paste them anywhere — text, attributes, alt tags — without breaking your page.
Example: a home page that knows your team
<!doctype html>
<html>
<head>
<title>{{ team.name }} — Home</title>
<meta name="description" content="{{ team.description }}">
</head>
<body>
<img src="{{ team.logo_url }}" alt="{{ team.name }} logo">
<h1>Welcome to {{ team.name }}</h1>
<p>{{ team.description }}</p>
<p>Questions? Email <a href="mailto:{{ team.contact_email }}">{{ team.contact_email }}</a>.</p>
</body>
</html>Save it. Visit your site. The values fill in. If you rename your team in settings, the next save updates the page.
Example: a shared header across pages
Partials — headers, footers, shared snippets — belong in your
_/ folder (single underscore). Files there are
never publicly served (so
https://yoursite/_/header.html returns 404), but pages
can still include them.
In your file manager, create a folder named _, then
save this as _/header.html:
<header class="site-header">
<a href="/"><img src="{{ team.logo_url }}" alt="{{ team.name }}"></a>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>
</nav>
</header>Then in every page, drop in:
{% include "_/header.html" %}
Update the header once, every page changes. The include can use the
same {{ team.* }} variables — they resolve wherever
they appear.
_? Bynli treats any folder whose
name starts with an underscore as internal — its files don't get
served as standalone URLs but pages can still pull them in via
{% include %}. On most setups the single underscore
folder is what works; if you need more than one section of partials,
create subfolders inside it (e.g. _/nav/header.html).
_/, Bynli automatically re-renders every page
on your site that uses {% include %}, so changes to
your header or footer show up everywhere on the next reload — no
re-saving each page. The ⚙ Rebuild button in the
file manager toolbar does the same thing on demand.
Rules and limits
- Includes stay inside your site. You can't include a file from another team's site or from anywhere outside your own files.
- Includes can nest up to 3 levels. A page can include a file that includes another that includes another. Past that, Bynli stops and writes an error to the build log.
- Unknown variables are blank. If you type
{{ team.president }}(which doesn't exist), it becomes nothing on the page and shows up as a warning in the build log. - Everything is escaped. Even if a team name contained
<script>, the page would print the literal text, not run it.
Embed a form
If you've built a form in /dash/forms, copy its ID (it looks like frm_xxxxxxxxxxxx) and drop it into any page:
{% form "frm_10471be04e2411f1b3da525400b6f817" %}The form renders inline, submits straight to your inbox, and triggers your auto-responder if you set one up.
Optional extras:
{% form "frm_xxx" success="Thanks! We'll be in touch." %}
{% form "frm_xxx" redirect="/thanks.html" %}| Argument | What it does |
|---|---|
"frm_xxx" (first value, required) | Which form to embed. You can also pass a short slug if you set one in the form's settings. |
success="message" | Custom success message after submission |
redirect="/path" | Send the visitor to another page after submitting |
Add a donate button
Drop a donate button anywhere on the page:
{% donate %}
{% donate amount=25 %}
{% donate amount=50 label="Support our work" %}Clicking the button opens your Bynli donation page in a new tab, so the donor stays on your site while they donate. The donation page accepts cards and PayPal — no payment setup required on your end beyond what you've already done in your team's billing settings.
| Argument | What it does |
|---|---|
amount=N | Pre-fill the donation amount (in dollars; 1 to 100,000) |
label="..." | Custom button text. Default: "Donate" (or "Donate $25" if you set an amount) |
class="..." | Extra CSS classes (appended to the default bynli-donate) |
id="..." | HTML id on the anchor |
The button is a plain HTML link that always carries the
bynli-donate class — target it from your site's CSS
to style every donate button at once:
.bynli-donate {
display: inline-block;
padding: .7rem 1.4rem;
background: #1d8a4e;
color: #fff;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
}
.bynli-donate:hover { background: #25b866; }
Or pass class="my-cta" to add a custom class to a
single button and style that one differently.
Show your team's resources
If you've added entries to your team's resources directory (in /dash/resources), you can show them on any page:
{% resources %}
{% resources limit=6 %}
{% resources category="legal" limit=10 %}The list refreshes on every page load — so when you approve a new resource in your dashboard, it appears on your site without rebuilding the page. Only approved resources show up; pending submissions stay hidden.
| Argument | What it does |
|---|---|
limit=N | How many resources to show (1–50; default 12) |
category="name" | Only show resources in that category |
The output uses CSS classes bw-resources,
bw-resource, bw-resource-name, etc. —
style them with your own CSS however you like.
Show your upcoming events
Show your team's upcoming events on any page:
{% events %}
{% events limit=10 %}
{% events scope=past limit=5 %}Each event card shows the date, title, location, a short description, the ticket price (or "Free"), and how many people are attending. Attendee names are never shown. Cancelled events are filtered out automatically.
| Argument | What it does |
|---|---|
limit=N | How many events to show (1–50; default 5) |
scope="upcoming" | Default — future events, soonest first |
scope="past" | Past events, most recent first |
Styling: target the bynli-events class system —
.bynli-events__item, .bynli-events__date,
.bynli-events__title,
.bynli-events__meta,
.bynli-events__price, etc.
What's coming
These work the same way and arrive in upcoming releases:
{% members limit=12 %}— show your current roster, refreshed live
Troubleshooting
If a tag doesn't render the way you expect, the build log is the first place to look. It records every problem Bynli ran into the last time you saved. We'll surface that log in the file manager in an upcoming release; until then, contact support and we'll pull it for you.
Common mistakes:
- Missing spaces:
{{team.name}}works, but{{ team.name }}is the convention and easier to read. - Wrong quote style:
{% include "header.html" %}with double quotes. Single quotes don't work yet. - Leading slash:
{% include "/header.html" %}is rejected. Use"_/header.html"— no leading slash. - Trying to escape your folder:
{% include "../other/x.html" %}is rejected by design.