📟 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 of document.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 the user 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.