Here's a quick summary of everything we released in Q1 2024.

Hygraph
Docs

Simple CTA

#Overview

This guide shows how to build a simple call to action (CTA) containing a single line text field, a rich text field, and components.

You can use this card if you are looking for a simple format containing only a heading, a body and a button link.

Simple CTASimple CTA

#Core concepts

In this guide, you'll work with components and basic component fields. Let's look into these concepts:

  • Component: a pre-defined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.

  • Basic component field: a component is a special field type in your Hygraph schema that defines which components of which type can be used in a model. Component fields can be of basic or modular types. A basic component field can only have one component attached to it. You can limit the number of component instances to one, or allow multiple component instances to be added in the content entry.

#What you can do

This guide offers two paths:

  • Path 1: Use this guide to create a simple CTA component that you can reuse across different models in your Hygraph projects.
  • Path 2: Clone the project that contains the entire CTA cookbook to compare the different CTA configurations without having to clone multiple projects.

#Step-by-step guide

Before we can build our simple CTA component, we need to create a button components that we can later add to our CTA.

The first step is to create the component itself. To do this, we'll navigate to the Schema of our Hygraph project and click +Add next to Components.

We'll use the following information:

FieldInput
Display NameButton
API IDButton
API ID PluralButtons

Simple CTA - button componentSimple CTA - button component

We'll click Add component to save. We can now start adding instances to this component.

Let's start with a Single line text field, which will be the label of our button. We'll find it on the Add fields right sidebar, click on it, and use the following information:

FieldInput
Display NameButton text
API IDbuttonText

Simple CTA - Button textSimple CTA - Button text

We'll click Add to save.

Finally, let's add a Slug field, which will be our button URL. We'll find it on the Add fields right sidebar, click on it, and use the following information:

TabFieldInput
SettingsDisplay NameButton URL
SettingsAPI IDbuttonUrl
SettingsLowercase checkboxLeave this checkbox selected
ValidationsMake this field required checkboxSelect this checkbox
ValidationsSet field as unique checkboxLeave this checkbox selected
ValidationsMatch a specific pattern checkboxSelect this checkbox, and use the dropdown to select the URL pattern. Write "Input value does not match the expected format." in the Custom error message field.

Simple CTA - Button URLSimple CTA - Button URL

We'll click Add to save.

This is how you build a simple button component in Hygraph. The next step is to create our simple CTA component, where we will include the button component we just created. This is a simple example of how to nest components using Hygraph.

We'll create the simple CTA component using this information:

FieldInput
Display NameSimple CTA
API IDSimpleCta
API ID PluralSimpleCtas

Simple CTA componentSimple CTA component

We'll click Add component to save.

We can now start adding instances to this component. Let's start with a Single line text field, which will be the heading of our CTA.

We'll find it on the Add fields right sidebar, click on it, and use the following information:

TabFieldInput
SettingsDisplay NameHeading
SettingsAPI IDheading
SettingsUse as title field checkboxSelect this checkbox
ValidationsMake this field required checkboxSelect this checkbox

Simple CTA component - HeadingSimple CTA component - Heading

We'll click Add to save.

Next, we want to be able to add text to our CTA. To achieve this, we'll add a Rich Text field from the right sidebar, using the following information:

TabFieldInput
SettingsDisplay NameBody
SettingsAPI IDbody
ValidationsMake this field required checkboxSelect this checkbox

Simple CTA component - BodySimple CTA component - Body

We'll click Add to save.

Finally, we'll add a basic component field to include the button component that we created earlier.

We'll find the Basic component field on the Add fields right sidebar, click on it, and use the following information:

TabFieldInput
SettingsDisplay NameButton
SettingsAPI IDbutton
SettingsSelect componentUse the dropdown to select the "Button" component
ValidationsMake this field required checkboxSelect this checkbox

Simple CTA - Nested button componentSimple CTA - Nested button component

We'll click Add to save.

Our "Simple CTA" component should look like this:

Simple CTASimple CTA

This guide helped you create the schema element yourself. Alternatively, you can clone a project containing all our CTA recipes.

Check out the next document section for that!

#Clone project

We have prepared a project that contains the entire CTA cookbook:

Clone this project

This cookbook contains all the recipes we have so far to create calls to action, so you can compare the different CTA configurations without having to clone multiple projects.

To find this particular recipe in the cookbook project, navigate to the schema and look for "Simple CTA".

This project also contains a demo model that includes all the CTA components in the cookbook as basic component fields, as well as a modular component field that you can use as a CTA type selector.