Create a content collection

Introduction

The content collection allows us to manage several contents by applying conditions.

In this example, we are going to build a travel catalog that simply displays two offers. The URL to this catalog will be sent via e-mail to our customers. Each offer will redirect us to its corresponding view when clicking on it.

These are the steps that are going to be covered:

  1. Install and configure the needed app
  2. Design our templates and contents
  3. Create conditions
  4. Create the content collection
  5. Build the flow

Install and configure the needed app

We need to install and configure the Hosted pages plugin.

The only function that we need from this app is Generator, which will generate our hosted page.

For further information on how to install an app, please refer to this page.

Design our templates and contents

Now we have to create our hosted page templates. You can download them by clicking on this link.

If you don’t know how to create a template, please go to this link.

  1. The catalog screen with our two offers:
  2. The first offer:
  3. The second offer:

If you need to know more about the attributes that are used in this hosted page templates, please refer to this post.

Once we are done with this, we create the hosted page contents based on these templates that we just created. It is important to keep in mind that we need to publish them in order to be able to use them in the content collection.

Create conditions

Now we are going to create the conditions that we will, later on, apply to the contents of the content collection. These conditions will determine which content will be displayed.

In this case, we are going to control which page will be displayed by checking the @session.currentPage@ variable. This is set when appending the ?page={{page_to_show}} string to our URL. For instance: https://hosted_page_url?page=offer1.

If you need more information about variables, please visit this post.

  1. page = offer1: this will show the first offer.
  2. page = offer2: this will show the second offer.

For more information on how to create a condition, please refer to this link.

Create the content collection

For creating the content collection, we go to the overview and we click on the “New Content Collection” button:

This will take us to the next screen, where we choose the format of our content collection. In our case we select “Hosted page”:

Here we apply each condition to its corresponding content. If none of our conditions match, the default content from our list will be used.

Once we have configured all blocks, we click on the “Save” button.

A pop-up will show up in which we enter the title of our content collection and, optionally, a description. After that, we click on the “Save Content Collection” button.

Please make sure that the content collection is published before you carry on with the next step.

Build the flow

The last thing that we need to configure is the flow that we are going to use for testing our content collection:

  1. Generator: this will generate our hosted page based on the content collection. The configuration should look as follows:
  2. Email to customer: in this case, we can just send an email to our email account with the hosted page URL, so that we can open it in the browser and test the process.

If you need more information on how to create a flow, please visit this link.

Well done! Now you have a content collection fully set up.

We could extend this example by adding a webhook after the generator object that would listen to users subscribing to the different offers from our travel catalog. Upon subscription, we could, for example, send an email to the customer with more information about the offer.