Vimeo

The Vimeo extension lets you fetch Vimeo videos and display them into a field in your content type. Subsequently, while creating entries, content managers can select only one of the listed videos at a time as the input value for that field, and the details of the video will be saved as JSON in Contentstack.

This step-by-step guide explains how to create a Vimeo custom field extension for your content types in Contentstack.

  1. Get the Vimeo Access token
  2. Add the Vimeo custom field extension to your stack
  3. Use your custom field
  1. Get the Vimeo Access Token

    In order to set up this extension, you will need your Vimeo account’s access token. Refer to this article to learn how to get it.
    Note down the access token, as you will need it while configuring this extension in Contentstack ( in Step 3).

  2. Add the Vimeo Custom Field Extension to Your Stack

    1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
      Create new extension.png
    2. Select Custom Field.
      Select custom fields.png
    3. On the configuration page, enter the details in the fields as given below:
      1. Title - Provide a suitable title, for example, Vimeo.
      2. Field data type - Select the data type in which the input data of the field should be saved in Contentstack. Select JSON in this case, since it saves the selected video’s details.
      3. Multiple: Leave this checkbox unchecked.
      4. Hosting method - Select Hosted by contentstack. As soon as you do this, you will see the Extension Source Code field below.
      5. Extension source code - In this field, you need to enter the extension code. To get the code, contact our support team at support@contentstack.com.
        The support team will provide you with the source code (src file). Copy the code from the index.html file located in the root folder and paste it in the "Extension source code" field.
      6. Config Parameter - Provide the value for the config parameter that is the Vimeo access token that you generated in step 1 as shown below:

        {
        "access_token": "xxxxxxxxxxxxxxxx588fb85xxxxxxx"
        }

    4. Click on Save. This creates your custom field.

    Now, let’s understand how you can start using this custom field in your content type.

  3. Use Your Custom Field

    To use your custom field, you need to follow the steps given below:

    1. Create a content type by clicking on the + New Content Type. Enter the relevant details for the content type and click on Create and Add fields.
      Create content type.png
      This leads you to the Content Type Builder page where you can add the relevant fields.
    2. Add the Custom field in your content type.
      Select custom field.png
    3. Select Vimeo from the dropdown and set the other properties of your custom field.
    4. After adding other relevant fields in your content type, click on Save and Close.

      This will create your content type. Now, go to the content type and create a new entry. You can see the custom field while creating an entry for this content type as shown below. Click on Choose Video:
      Choose vimeo video.png
    5. This displays all the videos, as shown below. Select the video that you want to add and click on Save.
    Capture1.PNG

On This Page

top-arrow