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

Hygraph
Docs

CTA with socials

#Overview

This guide shows how to build a call to action (CTA) with social links containing a heading, a body and a button.

To create it, we will use a single line text field, a rich text field, slugs, enumerations and components.

You can use this CTA to give more visibility to your social networks!

CTA with socialsCTA with socials

#Core concepts

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

  • Enumerations: an enumeration is a predefined set of values that represents a list of possible options. You can use them to group values within a type.

  • 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 CTA component with social links 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 CTA component with social links, we need to create a social networks button component that we can later add to our CTA.

To make this guide easier to follow, we've divided it in steps for you.

#1. Create a social networks button

The first step is to create this button, so that we can later include it in our CTA component as a field. We'll start by creating an enumeration that will allow us to select a social network from a dropdown menu.

We'll click + Add next to Enumerations and use the following information:

FieldInput
Display NameSocials
API IDSocials

CTA with socials - ButtonCTA with socials - Button

We'll click + Add to save.

Next, we need to add enumeration values. These are the options we will get when using this later on as a dropdown menu.

For every enumeration value, you need to enter a Display name, an API ID, and click Add.

We'll add the following values:

Display nameAPI ID
Instagraminstagram
Facebookfacebook
X (Twitter)xTwitter

CTA with socials - Button valuesCTA with socials - Button values

Finally, we'll click Add enumeration to save.

For the second step, we'll create a socials link component. We'll click + Add next to Components and use the following information:

FieldInput
Display NameSocial link
API IDSocialLink
API ID PluralSocialLinks

CTA with socials - Link componentCTA with socials - Link component

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

Let's start with an Enumeration field, which will be our dropdown menu. We'll find it on the Add fields right sidebar, click on it, and use the following information:

TabFieldInput
SettingsDisplay NameSocial icon
SettingsAPI IDsocialIcon
SettingsEnumerationSelect "Socials" from the dropdown menu
ValidationsMake this field required checkboxSelect this checkbox

CTA with socials - Icon dropdownCTA with socials - Icon dropdown

We'll click Add to save.

With this configuration, we've ensured that our enumeration field will use the social icons enumeration we created earlier, and will also be a required field.

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

TabFieldInput
SettingsDisplay NameURL
SettingsAPI IDurl
SettingsLowercase checkboxLeave this checkbox selected
SettingsUse as title field checkboxSelect this checkbox
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.

CTA with socials - Button URLCTA with socials - Button URL

We'll click Add to save.

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

It is time to create the CTA component with social links. We'll click + Add next to Components and add it using this information:

FieldInput
Display NameCTA with social links
API IDCtaWithSocialLinks
API ID PluralCtaWithSocialLinkss

CTA with socials - ComponentCTA with socials - 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

CTA component with socials - HeadingCTA component with socials - 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

CTA component with socials - BodyCTA component with socials - Body

We'll click Add to save.

Finally, we'll add a basic component field to include the social link 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 NameSocials button
SettingsAPI IDsocialsButton
SettingsAllow multiple values checkboxSelect this checkbox
SettingsSelect componentUse the dropdown to select the "Social link" component

CTA component with socials - Nested link componentCTA component with socials - Nested link component

We'll click Add to save.

CTA with socialsCTA with socials

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 "CTA with Social Links".

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.