Skip to main content

Get Started - Tutorial

Configure a Component

Prerequisites

Before you continue, make sure you have already created and synced your theme.json and component-name.json with our CLI. This step is explained in section 4 of this tutorial

Configuring a Component's visual editor is done in two parts:

  1. Set data-pf attributes on Components
  2. Dynamically add class names for Component Designer

1. Set data-pf attributes​

In order to link a component with its Visual Editor Configuration , you need to add the corresponding data-pf attributes.

Take the following HTML snippet as an example:

components/GridCard.js
<div data-pf='{"providerId": "my-cms", "componentKey": "grid-card", "title": "Campaign Hero", "groupId": "abc1234", "instanceId": "123456, "entryId": "abc1234"}'>
  <!-- Your component's HTML -->
</div>

The data-pf attribute tells us that the component key is grid-card. That the key you must have in your component-name.json configuration. This component is also part of a group called abc123.

2. Get new styles with our Helpers​

The last step is to retrieve new styles server-side from our Runtime API. You can do so by using our Runtime API or by using our Helpers Package that will do the hard work for you.

We wrote a complete guide to help you implement our helpers in your setup. Please read this article

Developers Ressources​

Integration Examples​