Page Templates
Get full control of how your pages look and feel by customizing your templates.
Editing the template
Customize the look and feel of your 3STORY pages using the powerful templating feature. If you are unsure about editing HTML, we recommend you check out the W3Schools website. There's a fantastic tutorial and all the information you need to get started.
Learn HTML with W3SchoolsTemplate Placeholders
We have a number of placeholders that you can used, so you can quickly and easily get started with making changes to your page templates.
For example, to output the name of the page:
{{name}}Another example that loops the flows selected for a page and outputs the name of each as a link:
{{flows}} <a href="{{flow.url}}">{{flow.name}}</a> {{/flows}}Advanced Templating
3STORY Pages Templates use the Eta templating engine. This allows you to use JavaScript to create dynamic content. You can use JavaScript to loop over arrays, conditionally show content, and more. Learn more about Eta JavaScript Templating
3STORY presents Eta with the page data in the page variable. For example, to output the name of the page:
<%= page.name %>Another example that loops the flows selected for a page and outputs the name of each as a link:
<% page.flows.forEach(flow => { %> <a href="<%= flow.url %>"><%= flow.name %></a> <% }); %> You can also perform conditional logic, for example only show the description if it has content:
<% if (page.description) { %> {{description}}
<% } %> Supported Placeholders
| {{name}} | The name of the page. |
|---|---|
| {{description}} | The description of the page owner. |
| {{logo_url}} | The logo of the page owner. |
| {{favicon_url}} | The favicon of the page. |
| {{address}} | The location of the page owner. |
| {{email}} | The email of the page owner. |
| {{published}} | The date and time the page was published. |
| {{id}} | The id the page. |
| {{tel}} | The telephone number of the page owner. |
| {{website_url}} | The website of the page owner. |
| {{created}} | The date and time the page was last created. |
| {{updated}} | The date and time the page was last updated. |
| {{flows}} | The beginning of the flows loop. |
| {{flow.id}} | The id of the flow. Must be inside {{flows}} tag |
| {{flow.name}} | The name of the flow. Must be inside {{flows}} tag |
| {{flow.url}} | The url to launch the flow. Must be inside {{flows}} tag |
| {{/flows}} | The end of the flows loop. |
| {{org.name}} | The name of the organization. |
| {{org.logo_url}} | The logo of the organization. |
| {{org.privacy_policy_url}} | The privacy policy page for the organization. |
| {{org.email}} | The email of the organization. |
| {{org.id}} | The id of the organization. |
| {{year}} | The current year. |