Web Templates - Voulez

Web templates technically are just responsive websites that take a few predefined parameters. You can develop them using existing design systems and component libraries. When developing a web project for a customer, your templates are subpages on the website itself and are hosted in the same location. The only difference is that they are not visible for website guests.

Web templates can be highly dynamic and, using code, you can create complex template attributes and do conditional rendering.

Where does your template live

If we, for example, create a web project for Molly’s Garden Shop, we might also want to create a few templates for social media assets, which she can use when she has a new garden article in store. For that we might create a new template which then lives on mollysgarden.shop/templates/article. This way we can use existing fonts, colors and CSS styling.

Creating the template

Go to the templates page and click “Create new template“. First, you have to select the customer to which this should be assigned, then you can give it a label (this is what the customer will see, too) and specify the URL where the template website is located.

Adding parameters

You can then start to define parameters for your template. They usually consist of a name, which is visible to the customer, and a value type.

By checking “Is required” you can also specify that this parameter needs to be filled out.

Do this for all the parameters your template needs.

Adding presets

For each template you can specify one or multiple presets. Those can be used to define the image dimensions for various social media channels.

The optimal image size to post on Facebook (according to Buffer) is 1200×630. Here’s how this preset can be specified:

Developing the template

Templates can be developed with various web technologies but everything you need to start is HTML, CSS and a little bit of Javascript.

This guide assumes that you already are familiar with those technologies, that’s why we’re mainly focussing on the Javascript part here.

Our example for here will be a little badge with a person’s name, photo and profession on it. Here’s the raw HTML we’re starting with:

<body>
  <div class="wrapper">
    <img id="img">
    <h1 id="name"></h1>
    <h2 id="profession"></h2>
  </div>
</body>

Parsing parameters

For this template we need three parameters: the image, the name, and the profession. Let’s say that the latter is not really needed so we make this one optional.

When we define those parameters in our template, Voulez will pass them to your template using query parameters: “?image=https%3A%2F%2Fapi.usevoulez.com%2Fimg%2F12345&name=Max&profession=Developer“

On our website we can now add a script tag and parse those parameters as follows:

const params = new URLSearchParams(window.location.search)
const name = params.get('name')
const imageSrc = params.get('image')
const profession = params.get('profession')

Rendering the site

Now that we have parsed the parameters, we can use the values to display our little badge:

document.getElementById('img').src = imageSrc
document.getElementById('name').textContent = name
document.getElementById('profession').textContent = profession

Note that while the profession could be null, the other values that are defined as mandatory will always be set when your template is being rendered from Voulez.

And just like that we built our first web template!