<h3>Pre-Requisites <a href="#prerequisites"></a></h3><ul><li>This guide assumes you have a basic familiarity with:<ul><li>Building WebApp and Module Layouts on Siteglide using Liquid tags</li><li>HTML, including data-attributes</li></ul></li></ul><h3>Using a ready-made SiteBuilder Layout <a href="#using-a-readymade-sitebuilder-layout"></a></h3><p><callout-component color="Accent">The quickest way to get started with the SiteBuilder Live Updates API is to install a SiteBuilder layout which already uses it. Look out for the teal 'Live-updates ready' tag on the layouts, install and modify at will.</callout-component></p><p>Having said that, if you want to modify any other layout to start fetching live updates with the API, we'll show how to do that next.</p><h3>Basic Markup Example <a href="#basic-markup-example"></a></h3><p>The following markup example would work well in the <code>wrapper.liquid</code> file of a webapp or module layout. The <code>layout</code> and <code>_model</code> variables will then be inherited from the tag used to output the layout in the page.</p><multicode-component data="[{&quot;name&quot;:&quot;liquid&quot;,&quot;value&quot;:&quot;{% comment %}Generate the public key as above and pass it to the main element of the HTML code as a data-attribite. Another data-attribute, data-sg-live-update-section, may optionally be used to supply a unique ID to the HTML section which will be referenced in the initialised Object.{% endcomment %}\n{% if context.exports.sitebuilder.live_update_JS_loaded == blank %}\n  <script async src=\&quot;{{'modules/module_86/js/v1-6/sitegurus_live_update_javascript_api.js' | asset_url }}\&quot;></script>\n  {% assign live_update_JS_loaded = true %}\n  {% export live_update_JS_loaded, namespace: sitebuilder %}\n{% endif %}\n{% function public_key = \&quot;modules/module_86/front_end/functions/v1/live_update_params_encode\&quot;, layout: layout, model: <em>model %}\n<section data-sg-live-update-key=\&quot;{{public_key}}\&quot; class=\&quot;bg-white dark:bg-gray-900\&quot;>\n  <div data-sg-live-update-component=\&quot;main_results\&quot;>\n    {% comment %} This HTML tag and its contents are marked with the data-attribute as a component which will live update. {% endcomment %}\n    {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}\n  </div>\n  <form data-sg-live-update-controls=\&quot;sort_and_filters\&quot;>\n    {% comment %} 1) Hidden fields {% endcomment %}\n    <input type=\&quot;hidden\&quot; name=\&quot;per_page\&quot; value=\&quot;20\&quot;>\n    {% comment %} 2) Ordinary HTML Form Elements{% endcomment %}\n    {% for category in context.exports.categories.items %}\n      <label>\n        <input type=\&quot;checkbox\&quot; name=\&quot;category\&quot; value=\&quot;{{category[0]}}\&quot;>\n        <span>{{category[1].name}}</span>\n      </label>\n    {% endfor %}\n    {% comment %} 3) Custom Toggle Buttons {% endcomment %}\n    {% assign month_start = 1682895600 %}\n    {% assign month_end = 1685574000 %}\n    <button data-sg-live-update-control-params=\&quot;/blog?range_gte={{month.start}}&amp;range_lt={{month.end}}&amp;range_type=month\&quot; data-sg-live-update-control-group=\&quot;month\&quot;>{{month.start | date: \&quot;%b\&quot; }}</button>\n    {% comment %} 4) Sort buttons {% endcomment %}\n    <div>\n      Weighting\n      <button data-sg-live-update-sort-order=\&quot;unsorted\&quot; data-sg-live-update-sort-type=\&quot;properties.weighting\&quot; type=\&quot;button\&quot; class=\&quot;ml-1\&quot;>\n        <svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; class=\&quot;w-5 h-5\&quot;>\n          <path fill-rule=\&quot;evenodd\&quot; d=\&quot;M2.24 6.8a.75.75 0 001.06-.04l1.95-2.1v8.59a.75.75 0 001.5 0V4.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0L2.2 5.74a.75.75 0 00.04 1.06zm8 6.4a.75.75 0 00-.04 1.06l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02l-1.95 2.1V6.75a.75.75 0 00-1.5 0v8.59l-1.95-2.1a.75.75 0 00-1.06-.04z\&quot; clip-rule=\&quot;evenodd\&quot; />\n        </svg>\n      </button>\n    </div>\n  </form>\n  {% comment %} Wrapping a component with aria-live alerts screen readers to changes in the number of results. {% endcomment %}\n  <div aria-live=\&quot;polite\&quot;>\n    <div data-sg-live-update-component=\&quot;total_results\&quot;>\n      {% capture exports_key %}webapp</em>{{id}}{% endcapture %}\n      {% assign per_page = per_page | default: context.params.per_page | default: 20 %}\n      {% assign total_entries = context.exports[exports_key].data.result.total_entries %}\n      {% assign total_pages = total_entries | plus: 0.0 | divided_by: per_page | ceil %}\n      {% assign current_page = context.params.page | default: 1 %}\n      <span class=\&quot;text-sm font-normal text-gray-500 dark:text-gray-400\&quot;>\n        Showing Page\n        <span class=\&quot;font-semibold text-gray-900 dark:text-white\&quot;>{{current_page}}</span>\n        of\n        <span class=\&quot;font-semibold text-gray-900 dark:text-white\&quot;>{{total_pages}}</span>\n      </span>\n    </div>\n  </div>\n  {% comment %} Our pre-built pagination solution when combined with a SiteBuilder pagination_layout which supports live-updates {% endcomment %}\n  {% include \&quot;modules/module_86/front_end/includes/v1/pagination\&quot;, live_updates: 'true', lock_per_page: 'false' %}\n  {% comment %} A form example to allow users to change number of results per page {% endcomment %}\n  <form class=\&quot;flex flex-wrap space-x-2 space-y-2 items-center\&quot; data-sg-live-update-controls=\&quot;per_page\&quot;>\n    <label for=\&quot;rows\&quot; class=\&quot;text-sm font-normal text-gray-500 dark:text-gray-400\&quot;>\n      Rows per page\n    </label>\n    <select name=\&quot;per_page\&quot; id=\&quot;rows\&quot; class=\&quot;bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block py-1.5 pl-3.5 pr-6 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500\&quot;>\n      <option selected value=\&quot;{{per_page}}\&quot;>{{per_page}}</option>\n      <option value=\&quot;25\&quot;>25</option>\n      <option value=\&quot;50\&quot;>50</option>\n      <option value=\&quot;100\&quot;>100</option>\n    </select>\n  </form>\n</section>&quot;,&quot;id&quot;:&quot;3a6b1e0e-b442-45c9-bbd4-2907c6004799&quot;,&quot;language&quot;:&quot;Plaintext&quot;}]" activecode="3a6b1e0e-b442-45c9-bbd4-2907c6004799"></multicode-component>

Live Updates Markup Example

Feedback

Roadmap

Changelog

www.siteglide.com

Luke Wakefield

Get Started

Quickstart Guides

Manage Sites, Users, Domains, Billing and more

Portal

Billing

Siteglide Billing

Billing Setup

Automatic Site Upgrades

Subscriptions and Changes

Invoices

Agencies

Agency Account

Clients

Site Copies

Add your own branding to the Siteglide Admin

Agency Whitelabelling

Users

Introduction

Invite & Manage Users

User Roles

Sites

Introduction to Sites

Site Backups and Disaster Recovery

Go Live

Install & Manage Modules

Site Details

Site Users

Quickstart: Create a Site

Site Subscription

Domains

Introduction to Domains

Add a Fully Delegated Domain

Add an External Domain

Subdomain on a separate instance

How to setup a multi domain start page

Legacy AWS External Domains

Your Siteglide Account

Marketplace

Log and Manage Support Tickets in Siteglide

Tickets

Matt Jones

Developers

Install, and get started with our CLI. With it, you can make changes to your site's code, directly from your machine. 

Quickstart: CLI

Introduction to the Command Line Interface (CLI)

About CLI

Once CLI is installed, you need to make connections (sometimes called an environment) between a folder on your machine and a specific Siteglide site.

CLI Site Setup

Creating WebApps via CLI

CLI Changelog

The main commands you'll need when using Siteglide CLI

CLI Command Reference

CLI Troubleshooting

Liquid

How to use Liquid to get the most from Siteglide

Introduction to Liquid

The context object is a rich source of data about the environment where you are writing Liquid, whether that is a Page, Email etc. This article goes into detail about the different properties and how you can use them.

Reference - Exploring the Context Object

Learn to recognise different types of Liquid syntax

Liquid Tutorial 1 - Recognising the syntax of tags, outputs and filters

Liquid Tutorial 2 - Liquid variables and types

The parse_json tag can be used to create objects from a JSON string. These allow you to represent complex entities with properties, instead of using a bunch of separate variables. Dot notation is a useful way to access those properties later. 

Liquid Tutorial 3 - Creating Liquid objects and accessing their properties

How to use Liquid For Loops and Indexing to handle arrays. Also, how to use a key to access key maps, using categories as an example.

Liquid Tutorial 4- Creating and accessing arrays, including looping

So far we have created variables to store data manually and accessed that data, but often we want to access data that has been provided by external sources. A good place to start is looking at information about the URL and the current Page.

Liquid Tutorial 5 - Accessing data from the page and URL

Use if statements and case statements to control what happens based on context

Liquid Tutorial 6 - Logic

Using Categories from the context object as an example, we look at a special kind of object (maps) and how to access their properties.

Liquid Tutorial 7 - Looping over an object's properties

With the powerful include and render tag, you can use Liquid to pull in other Liquid files into the file you're working in. This allows you to access oven-ready Siteglide functionality and efficiently re-use your own content across your site.

Liquid Tutorial 8 - Joining Liquid files together with include/render

Liquid Tutorial 9 - Using WebApp and Module collections - Coming Soon

Improve the accuracy of your if statements by using the blank keyword to catch a range of falsy states.

Liquid Tutorial 10 - Truthiness in Logic: using Liquid to determine if a field is empty or blank

We have often been asked if we can add a feature where customers can directly add Liquid code to rich text fields, and have it evaluated and run on the Page. For major security reasons, this is not possible; it would make it so easy for malicious users to POST form data to your site and have a high level of access to critical information. However, you can allow certain Liquid-based functionality in a safe and controlled manner. 

How to safely trigger Liquid functionality when parsing a rich text field

GraphQL

About GraphQL

Tutorials

Tutorial 1 - Your First Query

Tutorial 2 - Pagination

Tutorial 3 - Filtering the Results

Tutorial 3 - (Answers)

Tutorial 4 - Advanced Filtering

Tutorial 4 - (Answers)

Tutorial 5 - Using Liquid to run GraphQL queries on your Site

Tutorial 6 - (Answers)

Tutorial 6 - Variables

Tutorial 7 - Sorting

Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries

Tutorial 9 - Using Mutations to Create New Records

Tutorial 10 - Using Mutations to Edit a Record

Tutorial 11 - Using Mutations to Delete an Item

Tutorial 12 - Related Records and Datasources

Site API

Siteglide API: Introduction

Configuration

Custom Field IDs

Field Types

Zapier Integration

Developer Marketplace

About Building Modules

Adding Payment to a Module

Create Folder Structure

Data & UI Module Example

Module Setup

File Structure

In this section, we'll add reference code which is relevant across Modules. Specific Modules may have further relevant reference material in their own sections of the docs.

Modules Reference

Site Template Modules - and How to Make Your Own

Submit Module for Approval

Theme Module Example

Updating Modules

Bring some of the user-experience of a JavaScript framework into your server-powered Siteglide pages. With the live-updates API, applications can respond to user-input and refresh their content efficiently to display filtered, sorted or searched versions of lists. 

This is an advanced feature, but made to be highly customisable and simple to maintain.

The JS API is designed specifically for Siteglide, allowing the developer to set secure rules about what kind of content can be requested; this prevents malicious users from using the API to "explore" your data. 

Many Studio Dynamic Sections will use this out of the box to achieve interactive functionality in a consistent, documented way.

Live Updates JavaScript API

This article is your starting point for learning about the problems the Live Updates API was designed to solve, helping you to decide whether it could help you in your website project.

Introducing the Live Updates API

All versions of the Live Updates JavaScript will continue to be present and usable on the module, so existing sections can continue to use older ones. When creating or installing new sections, we recommend the newest version.

Live Updates Changelog

A step-by-step guide to taking a module/webapp dynamic section layout and adding Live Updates markup to enable advanced interactivity for the end-user.

Adding Live Updates interactivity to a Module or WebApp Dynamic Section Layout

Live Updates allows the end-user to filter the items from the database, but what if there is some content you don't want all users to see? For example, maybe you only want the user to access items which are assigned with a datasource to the same company webapp as them? This article shows how you can lock down some filters with liquid logic, 

Live Updates Example - Enforcing Filters

Steps to Use Live Updates Methods

Live Updates Troubleshooting

Steps to Initialise Live Updates with JS

If you want the convenience of the Live Updates JavaScript API to handle event listeners, but wish to customise the kind of content which is re-rendered, you can use a combination of Content Section includes and GraphQL to do this.

Using Live Updates with Custom Includes and optionally GraphQL

A Quick Summary of the Live Updates API when you need to look up a data-attribute, parameter, event or method.

Live Updates Reference

Studio

Introduction to Studio

Copy a Site Template from the Marketplace

Install Studio Module

Studio Page Editor

Dynamic Content in Studio

Studio AI Section Builder

Studio User Roles

Studio Themes

Install a Studio Theme

Studio Theme Publisher

Theme Sections

Theme Styling

SiteBuilder

Get started with SiteBuilder in a few simple steps

Quickstart: SiteBuilder

About SiteBuilder and how it can help you rapidly build websites and applications

About Sitebuilder

Reference

Site Setup

Advanced Features

Extend SiteBuilder

Layouts

Styling

Studio Page Templates

Preserve SEO juice when page URLs change, using 301 and 302 redirects. Custom redirects also allow you to give 410 (gone) responses.

URL Redirects

Custom Liquid URL Redirects have less limitations and are more powerful for handling complex SEO needs.

Custom Liquid URL Redirects

Dashboard

Pages

Quickstart: Pages

About Pages

Page Settings

Page Editing

Code View & Toolbox

Custom Fields in Pages

Pages with Siteglide CLI

Accessing Page Data

Sometimes you may be asked by a third party to add a file to your site to prove ownership, or to provide helpful metadata to 3rd parties. This article explains how to use CLI to create a page with a file extension like .txt

Adding non-HTML files to your site with alternative file extensions

Preventing Duplicate Content

Content Sections

File Manager

Introduction to File Manager

About Assets

Assets File Structure

Accessing Assets

Migrating Assets

Tags for Assets

Assets Troubleshooting

Assets with CLI

Teleporting Scripts to the Head and Footer with siteglide_head_scripts and siteglide_footer_scripts or using context.exports to avoid duplicates

Siteglide Scripts Explained

Optimising Images on the Fly with Cloudinary

Optimising Images Natively with Cloudflare

Quickstart: Categories

About Categories

Filtering WebApps and Modules by Categories Using Liquid Parameters

This Article shows how you can use the category_array field to access the IDs of the Categories assigned to a WebApp or Module Item

Outputting Categories on WebApp / Module / eCommerce Layouts

How can we help you?