Skip to content

Add-ons

Add blocks of custom code to your site to introduce a variety of custom features.

Griddo lets you add Add-ons from the site configuration. In this section we can quickly create as many Add-ons as we need and access them from any page. When you add custom code, you can choose to include it on every page of the site or only on specific pages.

Add-ons are made by creating custom code that is added to the pages that need it. It includes options to add it in the Head or in the Body.

  1. New: By clicking the New custom code button we access the page to create a new add-on.

  2. Name: Give the add-on a name. You can add a short description to identify it more easily from the list.

  3. Code: Choose where to place your code, in the Head or in the Body of the page.

  4. Code in: Select where you want this add-on to appear:

    • All pages of the site: It will appear on every page of the site by default.
    • Select manually on page: It will not appear on any page; we will select it manually from the page if we need it.
    • Choose specific pages: We choose the pages where we want this add-on to appear by default.
  5. Save: We save, the add-on is created and added to the site pages we selected.

  6. List: We go back to the list and the created add-ons appear. The most recently created appears last.

We have the option to add variables to the code so we can make certain changes on the page. For example, changing the greeting text in a chatbot or modifying a specific color.

  1. Add variable: Once the add-on is created, we add the variables so we can customize it later on the page.
  2. Panel: Opens the side panel with the fields to create the variables. We choose whether the variable depends on the page language or not.
  3. Fields: We fill in the variable fields: Name, Variable key and Default value.
  4. Add: When you click it, the variable is created and the panel closes.

If we no longer need an add-on, we can delete it by opening the list actions. It will always ask us to confirm the action before carrying it out.

When you deactivate an add-on, this add-on does not appear in the list of add-ons available to add to a page. The pages that previously had it assigned stop applying that part of the code until it is activated again.

We can copy an add-on from one site to another so we don’t have to create it from scratch. For safety, it is copied with the Add code to: Select manually on page option, regardless of the option that was selected in the original add-on.

Once we have created the add-ons we need for our site, we can manage them on whichever pages we want. To do this, we go to the page list and open a page.

  1. Config: Once inside the page, we open the page’s config tab and see a section to manage the add-ons.

  2. Add-ons: To add an add-on, we click and a side panel opens with all the add-ons we previously created in the configuration. We select the add-on we want to add.

  3. Added: The new add-on is added to the page. The add-on content is rendered once the page is published, so it is not displayed in the Griddo editor.

When you add an add-on with associated variables to a page, it appears with the Edit option. To edit its values, we just click it and a panel opens to edit what we defined when creating it.

In addition to the add-ons we create in the site configuration, we can create an add-on directly on a page, and it will only act on that page.

  1. Config: Once inside the page, we open the page’s config tab and see a section to manage the add-ons.
  2. Add-ons: To add an add-on, we click and a side panel opens with all the add-ons we previously created in the configuration. We select the last option that appears in the list: Custom code.
  3. Custom code: We fill in the Name and put the script in the field indicated by the provider: in the Head code or in the Body code.

Copying a page-specific add-on to another page

Section titled “Copying a page-specific add-on to another page”

We can copy an add-on from one page to another so we don’t have to create it from scratch.

  1. Copy: We open the add-on actions and select the copy option. The add-on is saved to the clipboard.
  2. Paste: We go to the page where we want to paste it, whether on the same site or a different one. We open the config tab and click to paste the add-on.

If we don’t want an add-on on a page, we can remove it by opening the actions of the add-ons list in the config tab. It will always ask us to confirm the action before carrying it out.

Configuring add-ons in Content Types packages

Section titled “Configuring add-ons in Content Types packages”

We can define that the templates of any content type include an add-on by default. For example, we can define that a program record template (content type program) always appears with a chatbot by default. This way, when a new program is created, there is no need to add it manually.

  1. Template configuration: When you select one of the templates, it takes us to an editor with the default view of the template.
  2. Add-ons: In the Add-ons section, the add-ons that have been set to appear on All pages of the site are shown. To add an add-on, we click and a side panel opens with all the available add-ons. We also have the option to create a custom code for this content type.
  3. Added: The add-on is added to the template.
  4. Save: We save the configuration. From now on, when a new page is created with this template on this site, it will have this add-on included by default. The change is also updated on all previous pages of the site that have this template associated.