Content model reference
Custom Components
Components that embed a third-party service rather than modelling content of their own. An editor picks what to show – a form, a social flow, a media asset, a translation job, a cloned page – inside the app's own interface; the service itself owns the fields, design and behaviour behind it. HubSpot and Flowbox are components with their own fields; Media, CLAI and Deep Clone are apps in the Contentful interface and are described here as step-by-step guides for editors.
1. HubSpot App
Name in Contentful: 🧩 HubSpot Component Content type ID: hubspotComponent Entry title: internalName
Specification:CS-156 (Scope Rejected)
Design:Form (Playbook V02)
Process documentation:HubSpot App (Confluence)
Embeds a HubSpot form in page content, for example a contact, service-request or newsletter sign-up form. It can be added to homepages, content pages, article pages and product detail pages. HubSpot owns the form's fields and design; Contentful only selects which form is shown and where.
In practice: the form is created and maintained in HubSpot first; an editor then adds a HubSpot Component to the page and picks the form from the list of available HubSpot forms in the Form field, filtering by name or id if needed. Once a form is selected, Contentful shows a live preview of its rendering directly in the entry.
| Field | Field ID | Type | Req. | Loc. | Rules and allowed values | Notes for editors |
|---|---|---|---|---|---|---|
| Market | vileda | JSON object (app) | Yes | No | Set through the Market field app. | Assigns the entry to the market or markets it belongs to. Mandatory on almost every content type – pick the markets in the app interface rather than editing the JSON. |
| Internal Name | internalName | Short text (Symbol) | Yes | No | Free text. | Editorial working title. Not shown on the website; it is the entry title in lists, search and reference pickers. Use a clear, consistent pattern, e.g. “PLP | Mops | Highlight Card”. |
| Form | form | JSON object (app) | Yes | Yes | Set through the HubSpot field app. | Select the form in the app interface. The field is localised, so each language can point to its own form – check this when you set up a page for a new market. |
| Anchor | anchor | Short text (Symbol) | No | Yes | Lower-case letters, digits and hyphens only, e.g. how-to-use. | Optional anchor id so this module can be jumped to directly and listed in an anchor navigation. Leave empty when the module is not a jump target. |
| Anchor Label | anchorLabel | Short text (Symbol) | No | Yes | Free text. | The text shown for this anchor in an anchor navigation. Only needed when Anchor is filled. |
| Anchor Icon | anchorIcon | Reference (entry) | No | No | Image entries only. | Optional icon shown next to the anchor label in an anchor navigation. |
Editorial notes
- The form is chosen through the HubSpot field app; its layout and fields are configured in HubSpot.
- The component is generic, not newsletter-only – any HubSpot form can be placed with it.
2. Flowbox App
Name in Contentful: 🧩 Flowbox Component Content type ID: flowboxComponent Entry title: internalName
Specification:CS-74 (QA Testing on S1)
Process documentation:Flowbox App (Confluence)
Embeds a Flowbox gallery of approved user-generated and creator content collected from social channels such as TikTok and Instagram, providing inspiration and social proof. The initial placement is below the product detail page; it can also be added to homepages, content pages and listing pages. Collection and moderation happen inside Flowbox.
In practice: the flow is created and maintained in Flowbox first; an editor then adds a Flowbox Component to the page and configures the Flow Config field to select it. Once configured, Contentful shows a live preview of the rendered flow directly in the entry.
| Field | Field ID | Type | Req. | Loc. | Rules and allowed values | Notes for editors |
|---|---|---|---|---|---|---|
| Market | vileda | JSON object (app) | Yes | No | Set through the Market field app. | Assigns the entry to the market or markets it belongs to. Mandatory on almost every content type – pick the markets in the app interface rather than editing the JSON. |
| Internal Name | internalName | Short text (Symbol) | Yes | No | Free text. | Editorial working title. Not shown on the website; it is the entry title in lists, search and reference pickers. Use a clear, consistent pattern, e.g. “PLP | Mops | Highlight Card”. |
| Flow Config | flowConfig | JSON object (app) | Yes | Yes | Set through the Flowbox field app. | Choose the flow in the app interface. Never edit the JSON by hand – an invalid value breaks the embed silently. |
Editorial notes
- Three flow kinds exist – static, dynamic by tag and dynamic by product. Pick the one matching your placement.
- You copy the flow key from Flowbox. For a tag-driven flow you also maintain the tags, and for a product-driven flow the product ID.
- The language is supplied by the system.
- Cookie consent is applied automatically from the Usercentrics consent state.
3. Media App
Type: Field apps in the Image, Video and Document entries – Media (Celum) and Media (Ignite) Used for: every picture, video and PDF on the website
Process documentation:Images, Videos, Documents, Configuration (Confluence)
The Media App connects Contentful to the places where Vileda keeps its media: images and PDF documents come from Celum, the digital asset management system, and videos come from Ignite. Nothing is uploaded into Contentful itself. You upload and maintain the asset in Celum or Ignite first, then select it in the entry.
Selecting an image (Celum)
- Open the Image entry, or create one from the reference field of the component you are editing. Check first whether a suitable entry already exists.
- Open the picker and find the asset: filter by title (text filter), asset type or collection, or browse the folder structure with “Filter by Folder”.
- Confirm the selection and set the focal point. The previews next to it show how the crop behaves in different layouts.
- Maintain the alternative text for screen readers and SEO.
- Optionally select a different image for mobile, or the same image with another focal point. Without a mobile image, the desktop image is used on mobile as well.
- Check the Internal Name, which is filled with the name of the source asset, and keep it.
Selecting a video (Ignite)
- Open the Video entry and search for the video by title, or filter by category or tag. The tag filter works as soon as tags are maintained in Ignite.
- Confirm the selection.
- If needed, override the settings that Ignite predefines, such as caption language, controls, loop or muted. The overrides can be set per language.
The caption language is preselected from the language you are maintaining, with a fallback language. If neither exists, the player shows “no captions available”.
Selecting a document (Celum)
Open the Document entry, search by title or collection filter, or browse the folders, and confirm. Only PDF files can be selected. How the document appears depends on the component, for example as a download button or as a link inside rich text.
Good to know
- Ignore the Media tab. Contentful's built-in Media tab is not used for Vileda. Product media is maintained in Celum, and the Contentful function is expected to be phased out.
- What you see in the picker. Admins decide which Celum folders, asset types and file formats are offered, so you only see assets that are released for the website.
- Reuse. The same asset can be used in several places, and picking it again creates another entry with the same visible name. Keep the source name so the entries stay recognisable.
- Languages. Image, alt text and video settings can differ per language. The first image you select defines the name of the component.
- Product images. The primary image is used on listing and cart pages and the secondary image appears on hover in listings. The gallery is maintained separately, so add the primary image as the first gallery image as well to keep both views consistent.
Editorial notes
- Without a mobile alt text, the desktop alt text is used on mobile.
- Thumbnail, aspect ratio, orientation and caption tracks of a video come from Ignite and cannot be changed in Contentful.
- Upload one high-quality image to Celum; the required sizes are derived from it automatically.
- Never create entries in the Contentful Media tab – always use Image, Video or Document.
Not yet available
- Alt text from Celum: it will become the default, matched to the language, and editors will be able to override it. Until Celum provides the metadata field, you maintain the alt text in Contentful.
- Product gallery with twelve images: the media grid takes up to eight images on the current model and will be extended to twelve. This is not developed yet.
- Player settings from Ignite are not delivered yet, so you cannot see in Contentful what is preset in Ignite when you override a setting.
- Media rights for TV-copy videos vary by country, channel and duration. Part of this information is kept in a separate Excel file rather than in Celum, and there is no automatic check in Contentful.
- The full-size video preview did not work on content pages in testing.
For administrators
The Media App configuration screen is for the global admin group. It sets the root folders, which Celum collection types act as folders or filters, the asset type filter, the allowed file extensions (by default gif, jpg, jpeg, png, pdf, svg, tif and tiff) and pre-applied filters. With several pre-applied filters, an asset has to match one of them. Ignite has no configuration options.
4. CLAI App
Type: App on the page entry – Prepare Translations and Request Translation Related: CLAI Translation Request (technical record)
Process documentation:CLAI, Content Cloning (Confluence)
CLAI is the translation service connected to Contentful. You write the content once in the source language, and professional translators translate and approve it in CLAI. The approved texts then come back into your entries automatically. A request always covers the whole page, including all content it references.
Translating a page
- Finish the content on the global master page. The master language is English (en-GB in CLAI, English in Contentful).
- Click “Prepare Translations”, select the languages and submit. The popup only offers languages you have write access to. This starts the approval in CLAI without changing the master page, and the request is shown as “waiting for approval”.
- Translators translate and approve the texts in CLAI. Approval can take weeks, which is why you start it early.
- Clone the page for your market with the Deep Clone App.
- Open the cloned page, for example the Italian one, and click “Request Translation”. The approved translations are taken from the translation memory and applied to the page, normally within seconds.
- Check the page in the live preview, including the translated slug, and publish it.
Good to know
- Market and language. The market of the page and the language are sent to CLAI together, for example Mexico and Spanish as es_MX. In the language list you only select the language.
- Applied as a draft. Translations are never published automatically. If the page is already live when an approved translation arrives, the live version stays unchanged and Contentful shows the status “Changed”. Contentful does not notify you, so check the status yourself.
- Existing texts are overwritten. Applying a translation replaces all existing text content of the page in the target language, including manual edits.
- Before or after cloning. Translations requested on the master are cloned along with the page. Translations requested after cloning exist only in the cloned page.
- Approved translations only. Vileda works with approved translations; automatic, unapproved translations are not part of the process.
- Translation records. Each request creates a CLAI Translation Request entry. These are technical records – do not edit them.
Editorial notes
- Translate after the source text is final. A later change in the master has to be sent to CLAI again and requested again by the markets.
- Request translations per market when the market needs them, so the translation inbox does not fill up with content nobody needs yet.
Not yet available
- A message that tells you whether an approved translation already exists, or that a translation was not requested because it is already in the translation memory.
- Requesting translations automatically while cloning.
- Translating many pages at once for a market launch.
- The details of the process are still being aligned with the global team, so this description can change.
5. Deep Clone App
Type: App in the sidebar of the page entry – section “Vileda” Used for: creating the page of another market from the global master page
Process documentation:Deep Cloning, Content Cloning (Confluence)
Each market gets its own independent copy of the global master pages, which the market editors maintain on their own. The Deep Clone App creates this copy: it copies the page and, recursively, all entries it references. Contentful's standard deep clone would copy everything without exceptions, so Vileda uses its own app that can leave out or reuse parts.
Cloning a page into a market
- Open the finished master page and find the “Vileda” section in the sidebar.
- Select the target market from the dropdown, for example Italy.
- Click “Clone Entry” and confirm in the dialog. “Clone and open” does the same and opens the new page in Contentful when the cloning is finished.
- Open the new page and adapt it: select the product from the catalog of that market, maintain the local slug and replace images where the market uses its own.
- Request the translation with the CLAI App.
What is copied and what is not
- Copied: the page and its content entries, for example components, breadcrumb items and the product detail page.
- Copied once per market: shared elements such as header and footer. The first page you clone into a market creates the market's own copy, and every later page of that market references it.
- Referenced, not copied: images and videos. A change to the original therefore applies everywhere. If a market wants its own image, it replaces the reference with its own image, and that field is no longer affected by changes to the global image.
Good to know
- No link to the master. After cloning, the copy is independent. Changes in the master are not pushed to cloned pages, which protects local decisions.
- Master changes. When the global team changes the master, it informs the markets. For text changes, the new text is sent to CLAI and the markets request the translation again.
- Permissions. You can clone from any market, but only with read-only access to it. You can only clone into a market where you have write access.
- Alt texts and captions. Alt texts are maintained per language. Video captions are chosen by the website from the language.
- Clone early. Clone a page as soon as it is complete, so the translation for the market can start while other pages are still being written.
Editorial notes
- A cloned page keeps the English slug until you maintain the local one, so check the slug of every cloned page.
Not yet available
- Bulk cloning – pages are cloned one by one.
- Automatic mapping of local URLs after cloning; existing country URLs have to be maintained by hand for now.
- Requesting the translation automatically while cloning.
- Re-cloning nested components is still being clarified.
For administrators
In the Vileda app configuration, admins choose which content models can be deep cloned (currently pages), which are never cloned (for example images) and which are cloned only once per market (for example the footer).