Typeform

Follow this guide to learn how to embed the Typeform templates in your web application.

Introduction

The Prepr integration with Typeform, an online form-building platform, lets you reference your form templates right inside Prepr. As a result, editors can easily search, preview, and add interactive web forms in content items.

You can set up Typeform as a remote content source in Prepr by following the steps below.

Step 1: Add Typeform as a remote source in Prepr

There are two ways that you can add Typeform as a remote source in Prepr. You can either add it from the Schema tab by following the steps in the add a remote source doc or go to Settings > Integrations and click the activate button in the Typeform box. A dialog box will prompt you to login or confirm that you want to connect to the Typeform account that you are already logged into.

Step 2: Add typeforms to your content item

Once you’ve connected to Typeform and added the Remote content field to your model, the content editor can add any available Typeform web forms and surveys to a content item using the following steps:

1. Navigate to the Content tab and click on the desired content item from the list.
2. In the remote content section, click Add form, search through the catalog, and add the desired items to the content item. Preview the forms by clicking Show form or the icon next to the form name.
3. Save and publish this content item to complete the setup.

Step 3: Retrieve the Typeform templates using the API

Now that you’ve added forms to the content item, you can retrieve the corresponding data using the API. Check out the example code snippets below:

{
 Page (id: "2a5a1715-cecf-4ba0-bb7c-d59ed0a7f014") {

   # The API Id of a text field in the Page content item
   title 

   # The API Id of the Typeform remote content field
   form { 

     # The Typeform Id
     _id 
   }
 }
}

{
   "data": {
       "Page": {
           "title": "My page with a Typeform",
           "form": [
               {
                   "_id": "ToWxsg3a"
               }
           ]
       }
   }
}

That’s it. With this result, you have all the data to include the form from Typeform in your web application. In addition, Prepr will synchronize your remote content automatically to keep it up to date.