How to add engage pages

Our new process of publishing engage pages allows a member of Canonical with access to our engage pages category to easily add an individual engage page without the need of coding skills by simply using Markdown. It’s been automated using our Discourse module and adds json data to whatever project has the module and has authenticated access.

This system builds up from the previous markdown engage pages

Create a new engage page

Create a new topic with the content of the individual engage page. Pick an existent engage topic and follow the format, here is an example of a webinar. In this example you will see:

  1. A table with a key and a value. The six first parameters are required (image, image_width, image_height, meta_image, meta_copydoc). Ask a front-end developer if you do not know the banner_class, this is usually based on the design of the engage page.

  2. If you are creating a webinar, please add a webinar_code. If you are creating a whitepaper, please add the form_id and the resource_url.

  3. Additionally, if you need to translate or change the form button, you can add form_cta, if you do not need it, then please remove it.

  4. If you are adding a webinar in a language other than English, you must provide a channel_id. If you don’t, it will default to the English language and the Brighttalk script will not load properly.

  5. primary_cta is likely to be always present, so keep it there. It will show only show in smaller screens. If you do not know the primary_cta link, it will most likely be #register-now which will link to our default form.

  6. Optionally you can use secondary_cta and secondary_link for a second resource, if you do not need it, please remove it.

  7. If your webinar is a Youtube video add youtube_id. The anchor link for this section is #youtube-section

  8. Finally, make sure your edits are rendered correctly in the preview. Once you save the edits, it will immediately publish to our live site.

Here is the Markdown of the previous example:


|Key|Value|

| --- | --- |

|image|https://assets.ubuntu.com/v1/4ba0e3a6-Joint+Lime-illustration-white.svg|

|image_width | 280 |

|image_height|294|

|meta_image|https://assets.ubuntu.com/v1/9a957056-telco-vevt-meta-image.png|

|meta_copydoc|https://docs.google.com/document/d/1xiyF0Kx6ISWiVp4gLrEYtwyaMo5iKPU01Vxq3SSb5lU/edit|

|banner_class|grad|

|form_id||

|resource_url||

|webinar_code|433508|

|primary_cta|Register now|

|primary_link|#register-section|

Add the new engage page to the index

  1. Go to the engage page category topic and add a new row to the table.*

  2. Follow previous examples in the table to make sure that all columns are filled in and the markdown code is rendered correctly:

  3. Topic, path, type and language are mandatory. These are parameters that help render the page correctly (form language, page layout, URLs…)

  4. Topic is an HTML tag with the title of the engage page and the URL of the topic you created in the previous section of this guide.

  5. Path is the new engage page URL you want. E.g. /engage/new-engage-page. Take into account that if you are creating and engage page in a language other than English, add it the URL /engage/es/nueva-pagina. If you are adding a language that we previously did not have, please notify us first.

  6. Tags are used to create “related engage pages” sections, which are located in the thank-you pages.

  7. Subtitle is the takeover subtitle, it will be reused for meta description.

  8. Published date is the date the engage page is published. At this point, the engage page will be published immediately.

Example Markdown of one row from the index table:


|topic|path|type|tags|publish_date|language|subtitle|

| --- | ---| --- | --- | --- | --- | --- |

[Extend your OpenStack cloud with native backup and recovery](https://discourse.ubuntu.com/t/extend-your-openstack-cloud-with-native-backup-and-recovery/18577)|/engage/extend-your-openstack-cloud-with-native-backup-and-recovery|webinar|openstack|2020-09-31|en|Learn how TrilioVault can be easily deployed in a Charmed OpenStack environment|

You are done!

Please go to your new engage page, that you indicated in the path column now. E.g. ubuntu.com/engage/new-page and check that everything is working correctly!

Tips and Troubleshooting

  • When you edit the code, make sure that the Markdown renders in the preview, before you click “Save edit”. Clicking “Save edit” will publish immediately, and if the Markdown is incorrect, it will fail to render the page.
  • Copy pasting sometimes can lead to a few problems. Make sure parameters that additional parameters in the engage page discourse topic, such as secondary_cta, secondary_link, form_cta and channel_id, are removed if not used, as the template will pick up empty content if you assign an empty value.
  • Number of columns of your content must match with the format. One way to check this is by counting the number of pipes, which should match the number of pipes | at the top of your Markdown table. When the columns are empty, a safe way to ensure the Markdown works is to add the pipes without any content, so you can keep track of the columns.
  • If you add an additional column, the discourse module will pick up that column, but the HTML template will not have it. Ask a developer from the Webteam to add the new column.