Use scaffolding in templates for AI-generated content

Last updated:

Using content scaffolding, you can define places in a page template where HubSpot can insert AI-generated content. When a user generates AI content for a page that uses a scaffolded template, HubSpot will review the theme's scaffolding schema and template configuration to generate and insert more accurate content. Currently, scaffolding only works with the content remix feature.

Adding scaffolding to a template is a two part process:

  • First, create a JSON config file that defines scaffolding fields where AI-generated content should be inserted, along with the type of content to insert. Currently, you can specify scaffolding fields for text and image content.
  • Then, update the template to reference the schema and include scaffolding variables as needed. 

Configure scaffolding schema

The first step to adding scaffolding to a template is to create a <fileName>.scaffold_schema.json file in your theme. This file is similar to the fields.json file, and can be placed anywhere within the theme folder.

// Example scaffold schema [ { "name": "image_field", "type": "image", "description": "Generate an image description for a background image in the header" }, { "name": "group_field", "type": "group", "children": [ { "name": "text_field_1", "type": "text", "description": "This is some text displayed at the top of the page" }, { "name": "text_field_2", "type": "text", "description": "This is displayed under text_field_1" } ] } ]
Use this table to describe parameters / fields
FlagDescription
name

The name of the scaffolding field. Use this name when referencing it in HubL under the scaffold_content name space. For example:

{{ scaffold_content.my_text_field.}}

type

Defines the format of the generated content, corresponding to the types used by theme and module fields. Supported types included text, image, and group.

description

A string that describes how the field is used in the template, up to 250 characters. HubSpot will use this description to generate more accurate content. All field types require a description, except for group fields.

Field types

Below are the available scaffolding field types. Text and image fields will generate text and image content, whereas the group field enables you to organize fields as needed.

Text

Generates text content in the form of a string.

[ { "name": "text_field_1", "type": "text", "description": "This is some text displayed at the top of the page." } ]

Images

Generates image content in the form of an object. Scaffold images support the same properties as image fields, including src, alt, width, and height. The width:height ratio must be 1:1, 1:1.75, or 1.75:1.

To generate the image, HubSpot will use the descriptions defined in the scaffold_schema.json file.

[ { "name": "image_field", "type": "image", "description": "Generate an image description for a background image in the header." } ]

Group

Groups fields for better structure and organization. This field type doesn't support a description property. 

[ { "name": "banner", "type": "group", "children": [ { "name": "header", "type": "text", "description": "This is a header used at the top of the page" }, { "name": "subheader", "type": "text", "description": "This is some text that is displayed below header" } ] } ]

Update the template

With your scaffold schema file configured, you can reference within the annotations at the top of the template file.

<!-- templateType: page isAvailableForNewContent: true label: Home scaffoldSchemaPath: ../schemas/home.scaffold_schema.json -->

Then, you can add your scaffold fields throughout the template as needed.

Scaffold fields are referenced using dot notation, starting with scaffold_content followed by the group (if applicable) and field name. You should also specify a fallback or value if this template will be used for creating standard pages. This is because scaffold_content is null outside the context of content remix.

<p>{{ scaffold_content.group.my_text_field or "Fallback text goes here" }}<p>
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.