What do I need before creating a Simple CTA component in Hygraph?
To create a Simple CTA component in Hygraph, you need a Hygraph account and an existing project. You can sign up for a free account at the signup page. For your project, you can either create a new one, clone the cookbook project containing all CTA recipes, or use an existing project. Note: Plan limits may affect your ability to add recipes—review your plan details before proceeding. Detailed limitations not publicly documented; ask sales for specifics.
How can I quickly get started with Hygraph if I'm new?
New users can follow the Getting Started Tutorial for a structured onboarding experience. You can also use pre-configured starter projects from the marketplace starters page to accelerate your setup. For community support, join the Hygraph Slack at slack.hygraph.com. Note: Some advanced features may require a paid plan or technical setup; review documentation for details.
Features & Capabilities
What is the Simple CTA component in Hygraph and what fields does it include?
The Simple CTA component in Hygraph is a reusable schema element designed for call-to-action sections. It includes a heading (single line text), a body (rich text), and a nested button component. The button component itself contains a button text field and a button URL field with validation for URL format and uniqueness. Note: The Simple CTA is a basic example; for more complex CTAs, see the CTA with social links or styled CTA guides. Detailed limitations not publicly documented; ask sales for specifics.
Can I reuse the Simple CTA component across different models in my Hygraph project?
Yes, the Simple CTA component is designed to be reusable across different models and content entries in your Hygraph project. You can define it once and include it wherever a call-to-action is needed. Note: If your schema or project requirements change, you may need to adjust the component fields accordingly. Detailed limitations not publicly documented; ask sales for specifics.
What are components and basic component fields in Hygraph?
In Hygraph, a component is a predefined set of fields that can be reused across models and content entries. A basic component field is a special field type in your schema that allows only one component instance to be attached. You can limit the number of component instances or allow multiple, depending on your content needs. Note: Modular component fields allow for more flexibility but are not covered in the Simple CTA recipe. Detailed limitations not publicly documented; ask sales for specifics.
How do I validate the button URL in the Simple CTA component?
The button URL field in the Simple CTA component uses the 'Slug' field type with validation options: it must be unique, required, and match a URL pattern. You can set a custom error message for invalid formats. Note: Only one button component is included in the Simple CTA; for multiple buttons, consider a modular component field. Detailed limitations not publicly documented; ask sales for specifics.
Implementation & Technical Documentation
Where can I find technical documentation for building components in Hygraph?
Technical documentation for building components in Hygraph is available at the Components documentation. For schema references and advanced guides, see the References documentation. Note: Documentation for Hygraph Classic is available separately for legacy projects. Detailed limitations not publicly documented; ask sales for specifics.
Is there a way to clone a project with all CTA recipes instead of building from scratch?
Yes, you can clone a pre-built project containing the entire CTA cookbook, including the Simple CTA and other CTA configurations. Use the clone project link to get started. This allows you to compare different CTA setups without manual configuration. Note: You may need to adjust the schema to fit your existing project requirements. Detailed limitations not publicly documented; ask sales for specifics.
Use Cases & Benefits
Who can benefit from using the Simple CTA component in Hygraph?
The Simple CTA component is useful for developers, content creators, and marketers who need a reusable, schema-driven call-to-action for their digital experiences. It is especially valuable for teams looking to standardize CTAs across multiple pages or projects. Note: For advanced use cases (e.g., multiple buttons, social links), additional configuration or different recipes may be required. Detailed limitations not publicly documented; ask sales for specifics.
What are the main benefits of using components for CTAs in Hygraph?
Using components for CTAs in Hygraph allows for schema reusability, consistent content structure, and easier updates across projects. Components can be nested and validated, ensuring data quality and reducing manual errors. Note: Overly complex component nesting may increase schema management complexity; review your project needs before implementation. Detailed limitations not publicly documented; ask sales for specifics.
Limitations & Support
What should I consider when adding the Simple CTA recipe to my project?
When adding the Simple CTA recipe, consider your plan limits, schema compatibility, and validation requirements. Some features may not be available on all plans, and you may need to adjust the schema for your specific use case. For support, consult the Hygraph Documentation or join the community on Slack. Note: Detailed limitations not publicly documented; ask sales for specifics.
Further Resources
Where can I find more CTA recipes or advanced examples for Hygraph?
Additional CTA recipes and advanced examples are available in the Hygraph documentation, including CTA with social links and styled CTA. You can also clone the full cookbook project for hands-on exploration. Note: Some recipes may require advanced schema knowledge or higher-tier plans. Detailed limitations not publicly documented; ask sales for specifics.
REQUIRED: You need to have a Hygraph account. If you don't have one, you can sign up here.
REQUIRED: You need to have a Hygraph project.
OPTION 1:Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.
OPTION 2:Clone the cookbook project. This is the way to go if you're curious about how the CTAs are made but don't want to follow the step-by-step creation process. This project contains the entire CTA Cookbook so you can compare them, or look into what instances they contain.
OPTION 3:Use an existing project of yours. If you have a project already and want to add this CTA to it, this is the way to go. In this case, you may need to adjust parts of the tutorial to your own project schema.
Take plan limits into consideration when adding a recipe to your own project.
In this guide, you'll work with components and basic component fields. Let's look into these concepts:
Component: a predefined 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.
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.
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:
Field
Input
Display Name
Button
API ID
Button
API ID Plural
Buttons
Simple 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:
Field
Input
Display Name
Button text
API ID
buttonText
Simple 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:
Tab
Field
Input
Settings
Display Name
Button URL
Settings
API ID
buttonUrl
Settings
Lowercase checkbox
Leave this checkbox selected
Validations
Make this field required checkbox
Select this checkbox
Validations
Set field as unique checkbox
Leave this checkbox selected
Validations
Match a specific pattern checkbox
Select 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 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:
Field
Input
Display Name
Simple CTA
API ID
SimpleCta
API ID Plural
SimpleCtas
Simple 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:
Tab
Field
Input
Settings
Display Name
Heading
Settings
API ID
heading
Settings
Use as title field checkbox
Select this checkbox
Validations
Make this field required checkbox
Select this checkbox
Simple 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:
Tab
Field
Input
Settings
Display Name
Body
Settings
API ID
body
Validations
Make this field required checkbox
Select this checkbox
Simple 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:
Tab
Field
Input
Settings
Display Name
Button
Settings
API ID
button
Settings
Select component
Use the dropdown to select the "Button" component
Validations
Make this field required checkbox
Select this checkbox
Simple CTA - Nested button component
We'll click Add to save.
Our "Simple CTA" component should look like this:
Simple CTA
Pro Tip
We've created a simple CTA component that contains a button component nested in it, as well as other schema elements.
You could potentially reuse this component throughout your project, as needed.
This guide helped you create the schema element yourself. Alternatively, you can clone a project containing all our CTA recipes.
This recipe shows you how to create a simple CTA component using Hygraph. If you want to try out something more complex, we have a CTA with social links and a styled CTA for you to look into!
REQUIRED: You need to have a Hygraph account. If you don't have one, you can sign up here.
REQUIRED: You need to have a Hygraph project.
OPTION 1:Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.
OPTION 2:Clone the cookbook project. This is the way to go if you're curious about how the CTAs are made but don't want to follow the step-by-step creation process. This project contains the entire CTA Cookbook so you can compare them, or look into what instances they contain.
OPTION 3:Use an existing project of yours. If you have a project already and want to add this CTA to it, this is the way to go. In this case, you may need to adjust parts of the tutorial to your own project schema.
Take plan limits into consideration when adding a recipe to your own project.
In this guide, you'll work with components and basic component fields. Let's look into these concepts:
Component: a predefined 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.
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.
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:
Field
Input
Display Name
Button
API ID
Button
API ID Plural
Buttons
Simple 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:
Field
Input
Display Name
Button text
API ID
buttonText
Simple 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:
Tab
Field
Input
Settings
Display Name
Button URL
Settings
API ID
buttonUrl
Settings
Lowercase checkbox
Leave this checkbox selected
Validations
Make this field required checkbox
Select this checkbox
Validations
Set field as unique checkbox
Leave this checkbox selected
Validations
Match a specific pattern checkbox
Select 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 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:
Field
Input
Display Name
Simple CTA
API ID
SimpleCta
API ID Plural
SimpleCtas
Simple 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:
Tab
Field
Input
Settings
Display Name
Heading
Settings
API ID
heading
Settings
Use as title field checkbox
Select this checkbox
Validations
Make this field required checkbox
Select this checkbox
Simple 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:
Tab
Field
Input
Settings
Display Name
Body
Settings
API ID
body
Validations
Make this field required checkbox
Select this checkbox
Simple 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:
Tab
Field
Input
Settings
Display Name
Button
Settings
API ID
button
Settings
Select component
Use the dropdown to select the "Button" component
Validations
Make this field required checkbox
Select this checkbox
Simple CTA - Nested button component
We'll click Add to save.
Our "Simple CTA" component should look like this:
Simple CTA
Pro Tip
We've created a simple CTA component that contains a button component nested in it, as well as other schema elements.
You could potentially reuse this component throughout your project, as needed.
This guide helped you create the schema element yourself. Alternatively, you can clone a project containing all our CTA recipes.
This recipe shows you how to create a simple CTA component using Hygraph. If you want to try out something more complex, we have a CTA with social links and a styled CTA for you to look into!
