# Adding Content

#### **Updating chunks via the Content Hub:**&#x20;

Chunks can be updated via the Content Hub by searching for their unique content key and replacing the placeholder content, as required:

![Updating chunks via the Content Hub ](https://4101535908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXQVCL50RwglOms2GWH%2F-MfXXGX82a77BIZ-2jrP%2F-MfcHjYWrTwjX9sSPFYs%2Freplace_company_name.gif?alt=media\&token=1736724b-e732-4689-b5ed-ec8db658ae00)

Below is a table of some of the most important chunks, along with their description and content key, to get you up and running with locating & replacing the placeholder content with that of your own:

| **Title**     | **Page** | **Description**                                                                                              | **Content Key**                              |
| ------------- | -------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- |
| Company Icon  | All      | Your company icon - appears as part of the company logo (to the LHS of the company name) throughout the site | `logo_icon`                                  |
| Company Name  | All      | Your company name - appears next to company icon                                                             | `company_name`                               |
| Hero Headline | Home     | Headline that appears as part of the hero section of the homepage                                            | <p></p><p><code>home\_hero</code></p>        |
| Hero Image    | Home     | Image that appears next to the hero headline                                                                 | <p></p><p><code>home\_hero\_image</code></p> |

**Updating chunks inline via the Magic Editor:**

* Enable inline editing from within the browser by either adding `?editmode=true` as a query string parameter on the url or using the relevant keyboard shortcut. On mac that's: `CMD`, `Shift`, `E`, on windows its `CTRL`, `Shift`, `E`.
* Select the content you would like to replace and begin typing. Images can be changed by either clicking the placeholder image and selecting the desired file from your desktop, or by dragging and dropping the desired file onto the dropzone (shown below).
* Click the *Save* button on the Editmode toolbar and voila!

![ ](https://4101535908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXQVCL50RwglOms2GWH%2F-MfdNxhJGH8xLnKmtvL9%2F-Mfdk2RTTTmkBQfB1Rz8%2Fhome-hero.gif?alt=media\&token=ce53418d-f254-4ca7-b0e0-8a59a444abbf)

{% hint style="info" %}
Some chunks cannot be edited inline. For example, the default meta title for each page must be replaced via the Content Hub.&#x20;

These kinds of chunks use the `useGetChunk()` syntax within the codebase, as opposed to the regular `<Chunk identifier="foo"/>` syntax for inline editable content.

Below is a table containing all of the most important examples, along with a description and content key, that can be used to locate them via the Content Hub.
{% endhint %}

| Title                                    | Description                                                                                                                                                                                                             | Content Key                                     |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| Meta Title Tagline                       | <p>By default, the meta title for each page will consist of your company name along with your chosen tagline.</p><p>eg. <em>"Neo - The fastest, most comprehensive, location API".</em></p>                             | `company_tagline`                               |
| Primary Color                            | Dictates the default color used for any instances throughout the site that have the `text-primary`,`border-primary` or `bg-primary` CSS classes applied to them. Usually found on page taglines and button backgrounds. | `primary_color`                                 |
| Font Family Composition                  | Font family to be used throughout the site. By default this is DM San&#x73;*.*                                                                                                                                          | `google_font_family_name`                       |
| Company Phone Number                     | Shown to users on the Contact Us page.                                                                                                                                                                                  | `contact_info_phone`                            |
| Company Email Address                    | Shown to users on the Contact Us page. Also used as recipient email when a user submits a query via the Contact Us form.                                                                                                | `contact_info_email`                            |
| Company Business Address                 | Shown to users on the Contact Us page.                                                                                                                                                                                  | `contact_info_location`                         |
| Email Capture Email Address              | Used as the recipient email when a user submits the email capture form shown in the footer.                                                                                                                             | `email_capture_email_address`                   |
| Contact Us Form Email Placeholder        | Placeholder content for the form email input field found on the Contact Us pag&#x65;*.*                                                                                                                                 | `contact_form_email_placeholder`                |
| Contact Us Form Subject Placeholder      | Placeholder content for the form subject input field found on the Contact Us pag&#x65;*.*                                                                                                                               | `contact_form_subject_placeholder`              |
| Contact Us Form Message Placeholder      | Placeholder content for the form message input field found on the Contact Us pag&#x65;*.*                                                                                                                               | `contact_form_message_placeholder`              |
| Email Capture Placeholder                | Placeholder content for the email capture input field found on the site foote&#x72;*.*                                                                                                                                  | `email_capture_input_placeholder`               |
| Sign Up Form Email Placeholder           | Placeholder content for the registration form email input field found on the Sign Up pag&#x65;*.*                                                                                                                       | `registration_form_email_placeholder`           |
| Sign Up Form Password Placeholder        | Placeholder content for the registration form password input field found on the Sign Up pag&#x65;*.*                                                                                                                    | `registration_form_password_placeholder`        |
| Sign Up Form Password Repeat Placeholder | Placeholder content for the registration form password repeat input field found on the Sign Up pag&#x65;*.*                                                                                                             | `registration_form_repeat_password_placeholder` |
| Sign In Form Email Placeholder           | Placeholder content for the login form email input field found on the Sign In pag&#x65;*.*                                                                                                                              | `login_form_email_placeholder`                  |
| Sign In Form Password Placeholder        | Placeholder content for the login form password input field found on the Sign In pag&#x65;*.*                                                                                                                           | `login_form_password_placeholder`               |
| Registration Form URL                    | URL provided to the action attribute on the registration form found on the Sign Up pag&#x65;*.*                                                                                                                         | `registration_form_url`                         |
| Login Form URL                           | URL provided to the action attribute on the login form found on the Sign In pag&#x65;*.*                                                                                                                                | `login_form_url`                                |
| Primary Hero Call to Action              | Refers to the link text and href attribute provided to the CTA button found on the hero section of the homepage.                                                                                                        | `home_hero_primary_cta`                         |
| Secondary Hero Call to Action            | Refers to the link text and href attribute provided to the CTA button found on the navigation bar.                                                                                                                      | `home_hero_secondary_cta`                       |

&#x20;

**Working with collection items:**

A very common use case when displaying content is to have a list of resources which have the same attributes. An example of this is the "Meet The Team" page, which displays each employee's name, bio, headshot, and social links. We call this repeatable content.

Collections are what allows us to define and display repeatable content. A collection is simply a "Group" of chunks with the same fields. For example, each item in the "Team Members" collection has the fields `Name`, `Bio`, `Twitter URL`,  `Facebook URL`,  `LinkedIn URL` and `Headshot`.

Fields can hold different types of information. For example, the `Name` field above holds text, whereas the `Headshot` field holds an image.

**Editing/adding a new collection item via the Magic Editor:**&#x20;

* Enable the [Magic Editor](https://editmode.gitbook.io/editmode-docs/the-magic-editor) within your browser.
* To add a new item, click any of the previous collection items and wait for the icons on the top right hand side to appear. Click the <img src="https://4101535908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXQVCL50RwglOms2GWH%2F-Mfdta6US5jUDvhfwkAh%2F-Mfg02TVH6z1e2gaJ1LN%2FCleanShot%202021-07-28%20at%2008.26.29%402x.png?alt=media&#x26;token=2fd6b215-cd37-41e1-81c6-10c4f15c3b07" alt="" data-size="line"> icon to add a new item to the collection.

![](https://4101535908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXQVCL50RwglOms2GWH%2F-Mfdta6US5jUDvhfwkAh%2F-Mfg0IwGN4rb_I7e6-L6%2Fhow-it-works.gif?alt=media\&token=0c9e6f17-adc1-4ccc-a6d2-2e2db4614f31)

**Via the Content Hub:**

* To add a new collection item, navigate to the relevant  collection within the left sidebar. Click <img src="https://4101535908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXQVCL50RwglOms2GWH%2F-Mfdta6US5jUDvhfwkAh%2F-Mfg1swDO1mkDtdeSS5Q%2FCleanShot%202021-07-28%20at%2008.36.20%402x.png?alt=media&#x26;token=85204c76-c14a-49b0-89a6-b0cf6ba1db26" alt="" data-size="line">on the top right hand side of the screen to add a new item to that collection. Below is a table of all of the collections, along with a description, present in the project.

Pre-populated Collections

| Name               | Page             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Blog Posts         | Blogs            | Refers to the Blog Posts displayed on the Blogs page. Each Blog Post has a `Title`, `Image`, `Published At Date` and rich text `Body`field. Edit an existing Blog Post or continue adding your own.                                                                                                                                                                                                                                               |
| Call To Actions    | All              | Refers to the Call To Action links on the Homepage, Login Form, Registration Form and Contact Us For&#x6D;*.* Each Call To Action collection item has a `Button Text` and a `Link`field that corresponds to the href attribute provided to the anchor tag.                                                                                                                                                                                        |
| Customer Logos     | Homepage         | Refers to the Customer Logos displayed at the bottom of the homepage. Each Customer Logo collection item simply consists of a `Brand` and a `Logo` field.                                                                                                                                                                                                                                                                                         |
| FAQs               | Homepage         | Refers to the Frequently Asked Questions displayed on the homepage. Each FAQ collection item consists of a `Question`and an `Answer`field.                                                                                                                                                                                                                                                                                                        |
| Feature Highlights | Homepage         | Refers to the Feature Highlights displayed on the homepage. Each Feature Highlight collection item consists of a `Name`, optional `Tagline`, `Description` and `Image` field.                                                                                                                                                                                                                                                                     |
| Headline Sets      | All              | Many of the pages/sections of content contain a headline and a tagline. For example, by default the FAQs section of the homepage will have a tagline of *"People often wonder.."* and a larger headline of *"Frequently Asked Questions"* . We've grouped these sets together into a collection called "Headline Sets". Each Headline Set collection item consists of a `Tagline` and `Headline` field, as well as optional `Description` fields. |
| How it Works Steps | Homepage         | Refers to each step displayed in the How it Works section of the homepage. Each Step collection item consists of a `Title` and `Description` field.                                                                                                                                                                                                                                                                                               |
| Job Postings       | Jobs             | Refers to the Job Postings displayed on the Jobs page. Each Job Posting has a `Role`, `Team`, `Location`, `Job Type`,`Application Closing Date` and `Job Description`field. Edit an existing Job Posting or continue adding your own.                                                                                                                                                                                                             |
| Navigation Items   | All              | Refers to all Navigation Items displayed on the footer of the site. Each Navigation collection item consists of a `Name` and a `URL` field.                                                                                                                                                                                                                                                                                                       |
| Pages              | All              | Refers to the Terms & Conditions, Privacy Policy, About Us, Organization and Our Journey static pages. Each page consists of a `Title` and rich text `Body` field.                                                                                                                                                                                                                                                                                |
| Press Releases     | News and Stories | Refers to the Press Releases displayed on the News and Stories page. Each Press Release has a `Title`, `Image`, `Published At Date`, `Category` and rich text `Body`field. Edit an existing Blog Post or continue adding your own.                                                                                                                                                                                                                |
| Pricing Packages   | Pricing          | Refers to each of the Pricing Packages displayed on the Pricing page. Each Pricing Package has a `Title`, `Price` and rich text `Description` field. It's also possible to replace the button text and href attribute on the Call to Action links displayed beside each package from within each collection item.                                                                                                                                 |
| Social Links       | All              | Refers to each of the social icons displayed on the footer. Each Social Link collection item consists of an `Image` and `URL` field.                                                                                                                                                                                                                                                                                                              |
| Team Members       | Team             | Refers to the Team Members displayed on the Team page. Each Team Member collection item consists of a `Name` ,  `Avatar` and `Bio` field. Links to social profiles for each Team Member can also be added from within each collection item.                                                                                                                                                                                                       |
| Testimonials       | Homepage         | Refers to the Testimonials displayed on the homepage. Each Testimonial collection item consists of `Name`, `Image`, `Role` and rich text `Comment` field.                                                                                                                                                                                                                                                                                         |
