Insert a component in Studio

Add a component by inserting its JSON object into the selected document's array. Use components in landing.json, or top and bottom in a supported page document. You can reorder objects to reorder the visible sections.

Add a contact button below articles

1. Go to Website > Studio, select Edit, then Source.
2. Choose article.json. This document affects every article. Keep its existing sections unless you intend to remove them.
3. Open the component reference. Find cio-call-to-action and confirm that article.json accepts it in bottom.
4. Add the object to the bottom array. Put a comma between it and any existing object. With no existing sections, the whole document is:

{
  "top": [],
  "bottom": [
    {
      "type": "cio-call-to-action",
      "version": 1,
      "heading": "Want to try curling?",
      "body": "Contact the club to ask about your first visit.",
      "action": {
        "label": "Contact us",
        "href": "/contact",
        "appearance": "filled",
        "size": "normal"
      }
    }
  ]
}

5. Change the wording and destination to suit your club. Leave type, version and the field names unchanged.
6. Select Save. Open an article in the private preview and check the button below its content. Check both languages if your website uses both.
7. Select Publish, then Release lock when you finish.

Choose a position

Position	Where it appears
landing.json → components	In sequence on the managed homepage.
A supported document → top	Above that route's normal content.
A supported document → bottom	Below that route's normal content.

Every component has its own list of allowed documents. In particular, live collections such as cio-latest-articles belong in landing.json, while a results page accepts only supplemental sections. Calendar has no top or bottom. See the document overview and component reference.

To put a component inside one page or article's body, use that record's Markdown editor and the supported paired tags. Studio JSON controls the surrounding layout. Product descriptions do not mount components.

Change or remove a component

Edit an object's fields to change it. Move the whole object within its array to change its position. Delete the object to remove the section, then repair any adjacent comma. Keep both top and bottom, even when one is empty ([]).

Before replacing a complete document with a worked example, copy its existing source somewhere you can recover it. Pasting a complete document replaces its current sections. You can also restore a saved checkpoint through History of changes.

Fix a refused change

Check the reported field first. Common causes are a missing comma, single quotes, a missing required field, a component in an unsupported document, an unready image, or a record ID from another club. Copy a minimal object from the reference and add your changes one at a time. Do not paste provider HTML or scripts; use the provider's component fields.