Getting Started

Everything you need to know about delivering content to your website.

Quick Start

If you’re using Next.js you can jump straight to the Next.js Toolkit, or if you’re using another framework you can use the standalone JavaScript client.

We also have a demo project built with Next.js that is preconfigured to work with the demo site option you can select after signing up for an account. Check out the repo for more information or take a look at the live site.

Once you have access to Contento and have set up your initial site, content types and maybe a page or two, it’s time to start working with the Content API.

Authentication

All requests to Contento need to be authenticated with two pieces of information: an API token and the site ID you want to interact with.

First up, you can get an API key from Contento here.

You’ll need to authenticate every request you make to the API with that token, using a standard Authorization header:

Authorization: Bearer {token}

You’ll also need to get the ID of the site you wish to call the API against. Go to the sites list and look for the value in the ID column, then pass that in the X-CONTENTO-SITE header:

X-CONTENTO-SITE: {site_id}

Making a basic request

Let’s put that together and call our /content/{id} endpoint to get a specific page of our site, in this case a blog post.

curl "https://app.contento.io/api/v1/content/Zx6Wy2ejOY" \
     -H 'Authorization: Bearer {token}' \
     -H 'X-CONTENTO-SITE: {site_id}'

The JSON response you get back will look something like this:

{
  "id": "Zx6Wy2ejOY",
  "published_at": "2022-09-22T14:13:00.000000Z",
  "slug": "benefits-headless-cms",
  "name": "What are the Key Benefits of a Headless CMS?",
  "author": {
    "id": "y6gDeV7rnp",
    "name": "Josh Angell",
    "email": "[email protected]"
  },
  "content_type": {
    "id": "QZvVZuNjPn",
    "name": "Blog Post",
    "handle": "blog_post"
  },
  "fields": {
    "title": {
      "id": "pHo7dRAlcn",
      "name": "Title",
      "handle": "title",
      "help_text": "Used for the H1 on the post detail page.",
      "type": "text",
      "text": "What are the Key Benefits of a Headless CMS?"
    },
    "summary": {
      "id": "b678rY10yq",
      "name": "Summary",
      "handle": "summary",
      "help_text": "Appears just under the title on the post detail page and list cards.",
      "type": "text",
      "text": "Headless CMS\u2019 have been taking off in recent years and represent core building blocks for B2B SaaS scale ups like Intercom, Teamwork and Stripe."
    }
  },
  "created_at": "2022-09-22T12:44:07.000000Z",
  "updated_at": "2022-09-22T13:58:18.000000Z"
}

You can then use this however you like in your front-end framework.

Getting Help

If you need a hand with anything, then please reach out to us via the contact form on our main website.