Close

Sandbox Guides

Below youโ€™ll find a step-by-step guide for using components, contentful etc. Please go through the guides before emailing the web team.

Introduction

If you cannot find the answer to your question here, contact p.hiltunen@celonis.com or @pekka on Slack

Examples

Superfluid World Tour

World Tour NYC

Zukunftspreis

Academic Alliance

Celonis Careers

Signing in to Contentful

  • Go to https://be.contentful.com/login

  • Sign in with the username and password provided to you

  • Navigate to the Space โ€œCelonisโ€ in the top left corner

    1 - introduction

Previewing and publishing content

We have two environments, staging and production.

Production environment

Production is the live celonis.com website. Anything you publish in Contentful will be automatically deployed to production the next time the automated build process runs. The build process runs once per hour, and is triggered at the exact hour. The build duration is roughly 20 minutes.

Staging

Staging, also known as Shirley, is where you can preview your unpublished content. Ask @Pekka for password. Staging environment builds and deploys not only published Contentful entries, but also drafted entries. Staging also builds once per hour, so you can preview the results before publishing them to production.

Creating a landing page

  1. Navigate to Landing Pages content type

    1 - creating-a-landing-page
  2. Use the "Add Entry" -button to create a new landing page and choose the suggested content type:

    2 - creating-a-landing-page
  3. Give your landing page a descriptive title, e.g. "Celosphere world tour overview page". This title does not show anywhere on the website, it's just so you can recognize your entry later on.

    3 - creating-a-landing-page
  4. Use the "+ Create new ..." buttons to add a Page URL. This is where your landing page will live. For example, if you define the URL to be โ€œmyfancy/landingpageโ€ it will appear at https://www.celonis.com/myfancy/landingpage . Do not include www.celonis.com in the URL.

    4 - creating-a-landing-page
  5. Page meta is the meta information about the page that search engines, bookmarks, and browsers use. This should be meaningful information about the page, and unique to this page.

    5 - creating-a-landing-page
  6. Choose in which languages should your landing page be generated.

    6 - creating-a-landing-page
  7. Under โ€œcontent blocksโ€ add the components you wish to have on your landing page. Do not use the โ€œSubpageโ€ content type here, as it will create a subpage instead.

    7 - creating-a-landing-page
  8. Fill in the content, text, images and other options for each of your components. Donโ€™t forget to publish the individual components. Make sure that each of the components has the green โ€œPublishedโ€ text on it to indicate that all changes are published.

    8 - creating-a-landing-page
  9. Hit โ€œPublishโ€ and your landing page will be published at the URL you specified the next time the website is deployed. Currently the build runs once every hour, and build duration is roughly 6min. However if you trigger the build from Contentful it may take from 7-10min.

    9 - creating-a-landing-page

Create a landing page with subpages

  1. Navigate to Landing Pages content type

    1 - landing-page-w-subpages
  2. Use the โ€œAdd Entryโ€ -button to create a new landing page and choose the suggested content type:

    2 - landing-page-w-subpages
  3. Give your landing page a descriptive title, e.g. โ€œCelosphere world tour overview pageโ€. This title does not show anywhere on the website, itโ€™s just so you can recognize your entry later on.

    3 - landing-page-w-subpages
  4. Use the โ€œ+ Create new โ€ฆโ€ buttons to add a Page URL. This is where your landing page will live. For example, if you define the URL to be โ€œmyfancy/landingpageโ€ it will appear at https://www.celonis.com/myfancy/landingpage . Do not include www.celonis.com in the URL.

    4 - landing-page-w-subpages
  5. Page meta is the meta information about the page that search engines, bookmarks, and browsers use. This should be meaningful information about the page, and unique to this page.

    5 - landing-page-w-subpages
  6. Choose in which languages should your landing page be generated.

    6 - landing-page-w-subpages
  7. Under โ€œcontent blocksโ€ find the content type โ€œSubpageโ€ and create the desired subpages for your landing page. The navigation for these will be generated automatically, as long as you add a navigation bar.

    7 - landing-page-w-subpages
  8. Fill in the page title, page URL and page meta for your subpage. For the Page Url write a URL where youโ€™d like your subpage to live. If your landing page URL is โ€œworld-tourโ€, and your subpage is called โ€œhomepageโ€ write the URL as โ€œworld-tour/homepageโ€ without the quotes.

    8 - landing-page-w-subpages
  9. Fill in the content, text, images and other options for each of your components. Donโ€™t forget to publish the individual components. Make sure that each of the components has the green โ€œPublishedโ€ text on it to indicate that all changes are published.

    9 - landing-page-w-subpages
  10. Publish the subpage, and use the arrow in the top left corner to go back to your landing page.

    10 - landing-page-w-subpages
  11. Add another subpage if desired by following the steps 5,6,7 and 8.

    11 - landing-page-w-subpages
  12. Once youโ€™re done creating your subpages, hit โ€œPublishโ€ on the parent page where youโ€™ve added your subpages, and your landing page will be published at the URL you specified the next time the website is deployed. Currently the build runs once every hour, and build duration is roughly 6min. However you can trigger the build from inside Contentful and that will take from 7-10min.

12 - landing-page-w-subpages

Adding a Navigation Bar in landing pages

The video below will explain how to add a Navigation Bar in landing pages:

Creating pages for Celonis website

  1. Navigate to the content type โ€œComponentized pagesโ€

    1 - celonis-website-pages
  2. Give your page a descriptive title, e.g. โ€œAcademic allianceโ€. This title does not show anywhere on the website, itโ€™s just so you can recognize your entry later on.

    2 - celonis-website-pages
  3. Use the โ€œ+ Create new โ€ฆโ€ buttons to add a Page URL. This is where your page will live. For example, if you define the URL to be โ€œacademic-alliance/universitiesโ€ it will appear at https://www.celonis.com/academic-alliance/universities. Do not include www.celonis.com in the URL.

    3 - celonis-website-pages
  4. Page meta is the meta information about the page that search engines, bookmarks, and browsers use. This should be meaningful information about the page, and unique to this page.

    4 - celonis-website-pages
  5. Choose in which languages should your landing page be generated. All celonis.com pages MUST exist on both languages or your soul will suffer eternal damnation and your body will be fed to crows.

    5 - celonis-website-pages
  6. Under โ€œcontent blocksโ€ add the sections you want to have on your page. For example โ€œText and image sectionโ€. You can use the search in the dropdown to find the correct section faster.

    6 - celonis-website-pages
  7. Fill in the content, text, images and other options for each of your components. Donโ€™t forget to publish the individual components. Make sure that each of the components has the green โ€œPublishedโ€ text on it to indicate that all changes are published.

    7 - celonis-website-pages
  8. Hit โ€œPublishโ€ and your page will be published at the URL you specified the next time the website is deployed. Be careful not to overwrite any existing URLs. Currently the build runs once every hour, and build duration is roughly 6min. However you can trigger the build from inside Contentful and that will take from 7-10min.

8 - celonis-website-pages

Translations

If youโ€™ve never used Contentful before, youโ€™ll most likely only see the fields for english content, to add the german translations you should press โ€œchangeโ€ in the sidebar enable the german content. You only need to do this once.

1 - translations

You can choose whether to generate english, german or both language versions of your landing page. Only choose to generate a version if you have filled in ALL the content for that language. The german version will appear in the same URL as the english version, just prefixed with /de/.

Important notice about translations

All celonis.com pages MUST exist on both languages or your soul will suffer eternal damnation and your body will be fed to crows.

Typography

Only heading 1, heading 2, and heading 3 are in use. Usage of other headings will cause them to not appear on the website.

When writing content, do not make entire paragraphs bold or italic. These text treatments are reserved to highlightย short passages of text or single words.

Legacy branding

Donโ€™t use hexagons, anywhere, ever. The new superfluid brand does not have hexagons. If you have legacy icons/imagery that use hexagons, contact Brandon Ortiz to get a superfluid branded version of the asset.

If youโ€™re caught using hexagons, an angry mob of villagers will burn your house down. Youโ€™ll also suffer the wrath of Gorgoroth.

Deep links

Deep links are links that link you to a certain section on the same or different website.

  1. Go to the section that you want the deep link to point to, for example โ€œText and image sectionโ€.

  2. Create a new entry under โ€œDeep linkโ€

  3. Fill in the deep link name, url, and whether it should be displayed in navigation bar. If you want the deep link to appear only in the navigation bar youโ€™re done.

    3 - deep-links

The following steps are only necessary if you want to link to your section from another section on the same or different page.

  1. Open the section where you want to link from and find the button-field.

    1 - link-existing-entries
  2. Press โ€œLink existing entryโ€ and choose the deep link entry you previously created

    2 - link-existing-entries
  3. Done

Modals

You can use modals to open embed code-component (such as bizzabo signup form) and Vidyard videos inside a modal window.

  1. Choose the component from where youโ€™d like to trigger the modal. For example a text and image -section. In the buttons field choose โ€œcreate new deep linkโ€

    1 - modals
  2. Give you deep link a title (Watch video) and URL (watch-video).

    2 - modals
  3. Select the radio button โ€œDisplay in Modalโ€

    3 - modals
  4. Publish your newly created deep link

  5. Create a new Modal Section

    5 - modals
  6. Inside the modal section, find the โ€œModal deep linkโ€ field and select โ€œLink existing entryโ€. Select the deep link you created previously.

    6 - modals
  7. In the content field press โ€œCreate new entry and linkโ€ and choose the component type you want to display in the modal.

  8. Fill in the contents for your the selected component and hit publish.

  9. Now when you click on your trigger button, a modal will slide in and display the defined contents. Yay!

Countdowns

You can include countdowns while using existing components such as Story Section and/or Text and Fullscreen Image Section.

  1. Use the โ€œ+ Create new โ€ฆโ€ button to add a countdown. You can also Link existing entries.

    1 - Countdown documentation
  2. Give the countdown a title (it wont appear on the web)

    2 - Countdown documentation
  3. Choose a starting date, a starting time for the event and a timezone (will be set to your default timezone if you donโ€™t choose else)

    3 - Countdown documentation
  4. Also choose a date & time for the countdown to start. NOTE: The Countdown From date should always be chosen before the Starting Date of the event. For example: If the events start time is January 30th, and you want the countdown to display for 30 days, you would set this to January 1st. This is also date from when the countdown component will appear.

    4 - Countdown documentation
  5. Give the countdown a description. Please make it short.

    5 - Countdown documentation
  6. Hit โ€œPublishโ€ for the countdown. NOTE: the countdown wont be visible before the date you chose the Countdown to start From.

    6 - Countdown documentation

Filters

Advanced list -section provides filtering functionality. Filters are automatically generated (if you enable them) based on the tags you give to the advanced list items. Search is always shown if filters are enabled.

Example: Say you have two advanced list items, you tag the first one with the tag Munich, and the second one with the tag London. A new filter will now be shown with two possibilities: Munich and London.

a - filters
  1. In the advanced list -section, check the checkbox to enable filters

    1 - filters
  2. Open an advanced list item entry

    2 - filters
  3. Tag your advanced list item with the relevant tags

3 - filters

Creating filters

Lets say youโ€™d like to create a new filter called โ€œFruitsโ€. The possible options for this filter are: โ€œBananasโ€, โ€œAvocadosโ€ and โ€œOrangesโ€

  1. Navigate to Tag content type

  2. Use the โ€œAdd Entryโ€ -button to create a new tag

  3. Fill in the name and slug of tag. eg name: Fruits, slug: fruits

  4. Inside this tag add your filtering options as child tags

    4 - creating-filters
  5. Child tags slug must be in format โ€˜parentslugโ€™+โ€™childslugโ€™ (lowercase)

    5 - creating-filters
  6. Youโ€™re done. You can now tag Advanced List items with the child tags you created and the filter will be automatically created.

Themes

The landing page generator provides 5 themes, based on the Superfluid gradients defined in our brand guide. Choosing a theme will cause the title and button to appear in the selected theme colours.

1 - themes

Additionally itโ€™s possible to choose dark or white background-color. All of the superfluid theme colors work on both background-colors. It is advised to have both background-colors to achieve maximum visual interest and break monotony of page.

2 - themes

For now, the Text and Video and the Text and Image Section have more varieties of background-color options that you can use.

Gradient in TAV and TAI

Optional fields

Most fields such as description and buttons are optional, and wonโ€™t appear on the website, unless you fill them in. However it is good practise to have a description under the title (and itโ€™ll also make the design look that much nicer). Unless a field mark is marked as required, it is optional, and you can leave it out.

1 - optional-fields

On this page you can see which fields are required for each component. You can also see this in Contentful when creating content.

Toasts

Toasts are pieces of information that pop-up from the lower-left corner after visitor has spent 10 seconds on a page.

Creating a toast

  1. Navigate to the correct content type, called "Toast component". If you can't see this content type, the reason is most likely that you haven't got the required permissions. If you need permissions to create toasts, contact @pekka on Slack.

    image
  2. Press the "create new toast component" -button

  3. A new toast component has been created. Fill in theme, base theme, title, desc, and optionally link

    image
  4. Select which pages the toast should be shown at. If your page is located at https://www.celonis.com/gunthers-things/gunthers-webinar/ you would add the relative URL: "/gunthers-things/gunthers-webinar". You can add multiple URLs page separating them with a semicolon ";".

    image
  5. Hit Publish

Live Streams

Live Stream Component is a standalone component that can be used on events like Celosphere Live, where visitors can see signup information, watch stream and see agenda information for ongoing events.

  1. reference agenda component which will be used as feed for Live Stream Component

    lsc-agenda
  2. Set live stream iframe. You can add 2 different streams within a Live Stream Component

    lsc-stream
  3. The following 5 fields (background image, title, description, signup page link and already signed up link) will be shown if visitor doesn't have sail through -code

    lsc-sail-through
  4. reference Email SignUp Section for already signed up visitors. Title and description should be set within that component

    lsc-signed-up
  5. set footer text

    lsc-footer

Salesforce and Pardot configuration

This documentation aims to describe the process of creating a Salesforce campaign and Pardot form handler to grab the information of the form submission and push it into Salesforce. If you have any problems or questions, please contact Benyi Heider.

Create campaign in Salesforce

Create a Salesforce campaign in Salesforce under Campaign โ†’ New Campaign. Please use the following campaign as a reference: https://celonis.my.salesforce.com/7011v0000003dD3

Fields to be filled (mandatory)

  • Active: Tick active = YES

  • Set Start Date & End Date to date of the campaign which uses the landing page

  • Set Status to โ€œIn Progressโ€, after campaign date to โ€œCompletedโ€

  • Fill in Budgeted costs, fill in Actual costs after campaign has ended

  • Campaign type - hierarchy 1&2: Fill in corresponding campaign types of the cmapaign. E.g. If the landing page belongs to a field event, select hierachy 1: โ€œPhysicalโ€, hierachy 2: โ€œCelonis Eventโ€ etc. (if landing page belongs to digital campaign, select digital)

  • Description: Fill in descriptive information about campaign that can help Sales to understand what the topic of the campaign was and how they can best follow up with campaign members.

1 - pardot

Create Pardot Form Handler in Pardot

  1. Log into Pardot and create a new folder in your department folder (e.g. in โ€œField Marketing & Business Dev) โ†’ Folders โ†’ Field Marketing & Business Dev โ†’ DACH Field Marketing. Naming: Start Date of campaign[YYMMDD]_webinar name

  2. Add new campaign in Marketing โ†’ Campaigns โ†’ Add campaign. Naming: Date of webinar[YYMMDD]_webinar name. Select folder that you have create in the step before

  3. Go to Marketing โ†’ Forms โ†’ Form Handlers and search for โ€œContact Form TEMPLATEโ€

  4. Copy the form handler โ€œ[Landing Page] Contact Form TEMPLATEโ€ (https://pi.pardot.com/formHandler/read/id/2855), and name it: โ€œ[Landing Page] Startdate campaign, Campaign nameโ€

  5. Edit the form handler. After you have copied the form handler go to โ€œEdit form handlerโ€ on the top right

    5 - pardot-form-handler
  6. Change completion actions โ€œAdd to Salesforce campaignโ€ โ†’ Search for the campaign that you created in step 2 (sometimes you need to refresh data, campaign will only show up if the Salesforce campaign is โ€œactiveโ€)

  7. Change completion actions โ€œCreate Salesforce taskโ€ - Subject and Comments if you want CRM owner to be notified when contact submitted contact form. If you donยดt want to notify anyone please delete this completion action.

  8. Save Form handler, DO NOT CHANGE ANYTHING ELSE

    8 - pardot-form-handler
  9. Click on โ€œView form handler codeโ€ and copy the Pardot link (starting with http) into Contentful, e.g. http://www2.celonis.com/l/238122/2019-09-09/9s37q in this form handler: https://pi.pardot.com/formHandler/read/id/2855

    9 - pardot-form-handler

Hide top banner in certain pages

  1. Go to PAGE content type, and select Top banner entry then select the entry which is shown in picture

    Screen Shot 2020-03-19 at 13.01.06
  2. Then select entry like below

    Screen Shot 2020-03-19 at 13.07.35
  3. Here you can add multiple urls separated with semicolon, then in those page urls the top banner will not be shown. Add this urls only in US English field

    Screen Shot 2020-03-19 at 13.11.11

Uploading and linking to assets

  • To upload a file, go to the media tab

image
  • Press the "Add Asset" -button

image
  • To get the asset URL for use elsewhere, press the "download file" -button to open the asset in your browser.

image
  • You can then copy the asset URL from the address bar to use elsewhere. All media uploaded to Contentful is publicly available (if you have the URL).

image

Intercom

Intercom can be added to any page. To add intercom please contact Benyi Heider.

A/B testing

With A/B test you can test control-version performs against variant. You can test one variant at a time. Traffic is split 50/50 between control and variant -versions.

You can test changes to content like wording of titles, or imagery. This helps you find out which content our visitors seem to respond to the best.

You can also build a variant with an entirely different set of components. For example control version could be very simple, with just a lead generation -component, while the variant could have testimonials, related resources, etc.

You can set up A/B tests on any "Landing page" or "Componentized page". Other content types do not support A/B tests.

We've added a new dimension to our analytics data, so that you can easily compare the performance between the two versions.

Control-version displays the content of any components that you've put in the "components" -section. Variant-version displays the content of any components that you've in the "components" -section inside the "A/B test page" -entry.

Creating an A/B test

To create an A/B test, navigate to the componentized page or landing page that you want to run the test on.

- A/B testing is located at the bottom of the entry. To create a new test press "Create new A/B Test Page and link"

image

- Give your A/B test page a name and add the components that you need.

image

- If you only want to test changes to certain components, you can use the "Link existing entries" -button to add a reference to components that should remain identical with the ones on the control-version.

A/B testing subpages

Testing subpages of "landing page" content type works similar to the flow described above. The only difference is that if you are using subpages, then the A/B test should be located inside the "subpage" -entry instead of the "landing page"-entry. See below for an example of a subpage with an A/B -test.

image

Previewing A/B test content

You can preview the A/B test content in our staging environment by checking the checkbox "Preview A/B test page components". After checking the checkbox you can trigger a deploy to Shirley from any landing page or componentized page. In most circumstances the changes should be live in 5 minutes.

image

Pardot form handler demo URL

If you haven't got a working form handler URL, you won't be able to publish your form to preview it. For preview purposes you can use the following URL: https://www2.celonis.com/l/238122/2020-03-20/bch28

Notice that it does not do anything, and you have to remember to change it to the actual form handler URL before going live.