📟 Template Editing Wiki
Template customization examples for SPP.co.
Technology used in the SPP Client Portal
Client-facing templates are written in HTML and Twig 3 (docs)
Design framework we’re using is Tailwind 4 (docs)
For navigation we use Turbo (docs)
Portal can be customized using CSS and vanilla Javascript
Webhooks are available
A versioned REST API is available (docs)
Tips and guidelines
Store custom js and css code in Github and reference in the header. E.g.
<script src="https://raw.githubusercontent.com/...">
You can also compile and deploy custom assets on a CloudFlare Worker.
Avoid targeting non-editable parts of the app layout such as form fields. Unlike Twig templates which are locked in, these can change as we deploy updates.
Avoid saving templates with no modifications because that will lock in the current version of the template.
To make global style changes use CSS variables that are already avaialble.
Most of the Tailwind framework is in the app’s CSS bundle, however some more obscure classes may not be available. You can add those utilities manually.
If custom javascript stops working after navigation, trigger it on
turbo:load
instead ofdocument.ready
. For example:document.addEventListener("turbo:load", () => {console.log("test")})
Extract reusable code blocks into custom pages, then use
{% include "custom.xyz" %}
in your templates.Use only the variables that are available in the view originally. E.g.
{{ ticket.id }}
is only going to be available in the ticket view. Custom pages will only have theuser
variable.The
user
variable is available on all pages where the user is signed in. This variable also contains onboarding forms and CRM fields.If you’re not sure what properties a variable has you can output them using
<pre>{{ user|json_encode }}</pre>
If a page throws an exception after template changes you can disable the template to load the default template instead.
When building automations you can use Zapier or Make. A cheaper and more maintainable approach is to code those automations using node.js and deploy them on a CloudFlare Workers.
Below you’ll find code examples for some common things you can do using templates.