You can upload an image from your computer. This can be in a jpg or png format. Make sure you add a tag beforehand, otherwise the button to upload an image is not clickable. The tag can be anything that resonates with what you see on the image or where it is located and helps to find it back easier at a later point in time.

File dimensions: The file should be as small as possible, to increase the speed of your application. However, the technical limitation of the image is 1.5MB.

After you have selected an image from your computer, the application asks you to crop the image. For the image component, there is no fixed ratio and you can select the ratio it should be cropped in.

Please keep in mind: 

• For other components where you can enter an image, you might not be able to change the crop outline as it has to be a certain fixed ratio, due to the layout of the component. To know which ratio resonates with the component you chose, please have a look at the FAQ. 

Furthermore, if you include extra space around the image (see the black and white squares in the image) into the crop, it will automatically be visible as white space on the learning page. When you are done with cropping, click on “Confirm Crop”, and the Image will be added to the learning page. 

• You can choose one of the images from a certain Tag. 
• GOOD TO KNOW: A tag can be given to a certain element (image, file, learning page) to be easier to find back again. Therefore, you can type in a certain tag of an image you have already used before and do not have to upload and crop it again. You can then select the image and click on “Select image” to add it to the learning page. 
•  Thirdly, you can choose an image from the library without typing a tag. To do so you have to remove existing tag, which is there by default and it will give you a small overview of all images in the application. You can then select the image and click on “Select image” to add it to the learning page. 
• If you would like to add an infographic with quite some text make sure to use a vertical outline, to make it better visible on smaller devices such as mobile phones or tablets. Lastly, after you have added the image, you can add an Image URL. This URL can be of an external or internal link. So, you now have been introduced to the “Image component” and learned how to use it to make your content more visually pleasing. Make sure to use this in between a high amount of text or to visualize what you would normally explain in a text (infographics) to make the information more interesting to the onboardee.

Media with Text

What is it? 

The Media with Text Component is designed to combine an explanation with either an image, a video, or a map. Commonly, this component is used as a way to present a welcome message by the department leader and a picture of him/her, show a map of the company location with the address next to it or have a video explaining something you discussed. 

In order to clarify what a media with text component looks like here are some examples 

Add pictures 

 In these examples, the Media with Text component is used to describe the dress code of a company in a written and illustrated form. Also, the hand washing rules during Corona are transferred with the use of videos. After having seen two examples of how a Media with Text component could look like, we show you how to build one yourself. So let’s go to the back-end of the application and have a look at the editor of the learning page.

How to add the media with text component? 

Start by creating a Media with Text component. You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. 

Now, you get an overview of all components you can enter. Select the Media with Text component and click on “Insert Component”. 

By doing so, the empty component is added to your learning page. You can now see that the left part displays the content of the Media with Text component, whereas an editor appears on the right side. Let's quickly look at the editor. Here you can first select the variation of the component you would like to work on. 

For the Media with Text component, there are two variants. This can be changed throughout the whole editing process so you can see which variant works best for your content. 

NOTE: The first variant can be used for all media (image, video, map/iframe), whereas the second variant is only available for images as it includes a vertical outline of the image. So, if you would like to incorporate a video or map in the component, make sure to check the first variant. Below that, you can change the number of items. This refers to how many times you would like a media with text parts underneath each other. By increasing the number here, more items appear on the left. 

TO KNOW: Each item can have a different type of media in there and does not necessarily need to have the same text parts (Title, Subtitle, Content) as the one before. After that, you can also change the background color of the whole item. As we have finished the media with text editing, for now, we can go to the content of the Item.

By clicking on the Title or any other part of the first Media with Text Item, a new editor will appear on the right-hand side. This is named “Text Item1”. An editor like this will appear for each item of the Media with a Text component. Therefore, you can individually set up each item to your liking. 

On the top of the editor, you can vary the position of it. For example, you can switch the first item for the second one. Next to that you can choose to have a “Title”, “Subtitle” and/or “Text” part in the item. You can select them all to your preference. Also, the text can be aligned to the left, center, or right, which can be changed below that. And lastly, you can decide to have one of the following visuals in your Media with Text Items: “Image”, “Video” or “Iframe”. 

Of course, you can also leave them out completely. For this example, we choose to add a Video, which could be a video from the CEO, but by default is the video of our Talmundo Product.

Maps Component

What is it? 

The Map Component is a specific component that allows the administrator to only add a title, subtitle and a google maps. However, we have many different possibilities to include a map in the content that you are building.

Most commonly, google maps are used in the map and in the Accordion component within a FAQ or “how to get to the office” section.

Figure 1: Example of a Map Component 

Figure 2: Example of a Map in the Accordion Component In these examples, a map is added to the Map and the Accordion component. 

Where in the Accordion component you can give more explanation, the map component is often used together with other components to clarify what one can see. 

When you click “view larger map” within the map, you will immediately be guided to Google Maps. After having seen an example of how a map could look like we show you how to integrate one yourself. So let’s go to the back end of the application and have a look at the editor of the learning page.

How to add the Map Component 

You can only enter one of those. It is not possible to put an image AND a video AND a map into one Media with Text Item. 

As soon as you have put in the map, image, or video, you can also choose the position you would like to have in relation to the text. By default, it will be on the right-hand side of the text, aligned on the top, but you can also choose to display it on the left and aligned to the middle of the text or the bottom.

After having finished the first item you can continue going through the process with the next items. So, you now have been introduced to the “Media with Text component” and learned how to use it to make your content as clearly structured and interesting as possible. Make sure to use this especially if you want to combine text with images, maps, or videos to make the page look more appealing

One way is to add a map through the map component. You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. 

Now, you get an overview of all components you can enter. Select the map component and click on “Insert Component”. 

By doing so, the empty component will be added to your learning page. You can now see that by default it will have chosen the Talmundo office map location on the left, whereas an editor appears on the right side. 

The Editor 

Here you can first select if you would like the Title and Subtitle to appear or disappear. This depends on your preference. Below that you can see the “Paste Google Maps embed code”. 

Here, by default, it shows the embedded code of the Talmundo office location. This serves as an example to show you how the code needs to look to make the map work. 

NOTE: This code might differ for each component where you can enter a map in. 

For example, in the map component, you need to put in the whole Iframe, whereas, in the Accordion component, you only need to put in the link that is within the Iframe. So, to get the right code (also called Iframe) for your map in our application, we have to go to google maps. 

So let’s open another tab in our browser and select a location that we would want in the application. 

For this example, we select the Eiffel Tower in Paris. After having entered the location you desire to be represented in the search bar on top, you can find the “Share” button on the left. When clicking on that, you can choose between “Send a link” and “Embed a map”. For this, we will use the “Embed a map” tab

This tab enables you to copy an HTML link (GOOD TO KNOW: It does not matter which size you select, as it will adapt to our application automatically.). 

Header Component 

What is it? 

The Header Component is often used to start a Learning Page. Many customers like to place a background image on the top of the learning page to introduce the text that is following. Sometimes even with a title within it. 

To create one yourself, go to the back end of our application and have a look at the editor of the learning page.

How to add a Header Component?

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. Select “Header” and click on “Insert Component”. 

By doing so, the empty component is added to your learning page. You can now see that the left part displays the content of the Header component, whereas an editor appears on the right side. 

Let’s quickly look at the editor. Here you can first select the variation of the component you would like to work on. For the Header component, there are two variants. One where the text is in the center, and another one where the text is laid out to the left. This can be changed throughout the whole editing process, so you can see which variant works best for your content. 

Below that, you can change if you would like to have the “Title” and “Subtitle” there or not. 

Next, you can either choose to have a background color and select the color of your liking (either from your company color or just any other color you prefer) or upload a background image. 

NOTE: The ratio of the image is approximately 10 to 3.6. So, try to select an image that has those ratios to get the best result.

Now, the only thing left to do is to change the alignment of the text. When you click on the title or subtitle on the left, you get the choice to change the alignment in the editor that appears on the right. So, you now have been introduced to the “Header component” and learned how to use it to introduce important topics or make a subtopic stick out. 

Accordion Component 

What is it? 

The Accordion Component is commonly used as a FAQ or in order to give an overview of several locations or departments a company has by giving each of them an Accordion Item with its own content, image, or map.

How to add an Accordion Component? 

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. 

Now, you get an overview of all components you can enter. The Accordion component will be automatically selected.

Therefore, you can immediately click on “Insert Component”. By doing so, the empty component is added to your learning page. You can now see that the left part displays the content of the Accordion component, whereas an editor appears on the right side

The editor

Here you can first select the variation of the component you would like to work on. For the Accordion component, there are two variants. 

This can be changed throughout the whole editing process, so you can see which variant works best for your content. 

Below that, you can change the number of items. This refers to the different items of the accordion that are collapsible. By increasing the number here, more items will appear on the left. After that, you can also let the Title and Subtitle appear or disappear to your preference. 

By clicking on the title and subtitle itself you can also change its name of it. As a next step, the Background Color of the Accordion Items can be changed. 

The active color represents the color of the item when it is opened. The inactive color represents all other items that are not opened up yet. When you click on the color field, you can see the brand colors of T your company, select any other color, or type in a HEX code to find the color you want it to be. When you are done, just click on “OK”. Below the background color, you can find the “Title color”. 

This works exactly the same way, it just is the color of the titles of the bars that you colored before. 

Slalom Component

What is it? 

The Slalom Component is commonly used as a way to introduce different departments or in order to present several products in a fun way by giving each of them a Slalom Item with its own content, image, video or map.

How to add a Slalom Component? 

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. Select “Slalom” and click on “Insert Component”.

Take a look at the editor on the right side. 

Here you can first select the variation of the component you would like to work on. For the Slalom component, there is only one variation. Therefore, you do not need to change anything here. 

Below that you can let the Title and Subtitle appear or disappear to your preference. When going back to the Component editor, you can make the slalom items “Swipeable on mobile”. This means that if you do not tick this, all items on a mobile phone will appear below each other, as there is limited space on a mobile phone screen. 

However, if you decide to activate the swipeable mode, a user can swipe between the slalom items, which in most of the time makes it more user-friendly. 

And as a last aspect in the editor, you can change the number of items. This refers to the different items of the slalom that are appearing below each other. By increasing the number here, more items will appear on the left. As we have finished the Slalom editing for now, we can click on the first Slalom item.

This you can do by clicking on any of the content (image, title etc.) of the item itself. Now, a new editor appears on the right-hand side. This one is called “Slalom Item 1”. An editor like this appears for each item of the slalom. 

Therefore, you can individually set up each item to your preference. On the top of the editor, you can vary the position of the items. For example, you can switch the first item to the second one.

NOTE:  You cannot switch off the Text part, so if you prefer to only have a subtitle in there, without the text, you need to delete the by default created words “Content 1”. 

In the Text part, you can write a short description of for example the Sales team. Next to that, you can choose to have one of the following visuals in your Slalom Item: “Image”, “Video” or “Iframe”. Of course, you can also leave them out completely, however, that resonates with a text component rather than with a Slalom.

NOTE: You can only enter one of those visual features. It is not possible to put an image AND a video AND/OR a map into one Slalom Item. 

TIP: As stated before, you can change each Slalom item to your own liking. Therefore, try to add an image to the first one, a video to the second, and a map to the third. This could change up your page and make it more interactive. Of course, this has to fit with the content you are trying to communicate.

Statement Component 

What is it?

The Statement Component is one of the simplest components that we have. It is not that commonly used, however, it is a good way to highlight a quotation of the CEO or the mission of your company for example.

How to add a Statement Component?

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. Select “Statement” and click on “Insert Component”. By doing so, the empty component is added to your learning page. You can now see that the left part displays the content of the Statement component, whereas an editor appears on the right side.

In the editor, on the right, you can first select the variation of the component you would like to work on. 

For the Statement component, there are two variants. 

One where the text is in the center, and another one where the text is laid out to the left. This can be changed throughout the whole editing process, so you can see which variant works best for your content. Below that, you can change if you would like to have the “signature” there or not. This refers to a slightly smaller text space, where you can add the name of the author of the Statement. Or of course, use it for a different purpose as a subtitle for example.

 Next, you can either choose to have a background color and select the color of your liking (either from your company color or just any other color you prefer) or upload a background image.

TO NOTE: The ratio of the image is approximately 10 to 3.6. So, try to select an image that has those ratios to get the best result.

Tabs Component 

The Tab Component is commonly used as a way to introduce or explain a short list of things. Each tab can be individually structured and can even incorporate a video, image, or map to underline the content. 

How to add a Tabs Component?

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. Select the Tab component and click on “Insert Component”. By doing so, the empty component is added to your learning page. You can now see that the left part displays one tab of the component, whereas an editor appears on the right side. 

Select first,  the variation of the component you would like to work on. For the Tab component, there are two variants. 

One with the Tabs laid out on the top, and another one with the tabs on the left. This can be changed throughout the whole editing process, so you can see which variant works best for your content. 

Below that, you can change the number of items. This refers to the separate tabs that appear. By increasing the number here, more items will appear on the left. 

BE AWARE: For each tab component there is a maximum of 4 tabs, as this is the most user-friendly way of representing the content on each possible device. If you would like more, you can create another tab component beneath it, or we would recommend making use of the columns or accordion component instead. 

After you have selected the number of items, you can choose the color that each tab should have. Here you can have an active and inactive color. Whenever you open one tab, that is the tab that is “active” all other tabs will then appear in the “inactive” color. As you can see below that, you can also select the color of the text written in the tab itself. Make sure to select a color that fits the color of the tab well, to be readable for the onboardee. 

TIP: Use light colors on a dark background and the other way around. As already stated, you can change the names of the Tabs and the titles and content within the tab. By clicking on one of the tabs, another editor appears on the right-hand side. That one will be called “Tab Item 1”. 

Here you can change the position of the Tab, if you would like to switch the first for the second one for example, and choose a background color of the text within the Tab. 

TIP: If you would only like to include a visual in the Tab and leave out the text part of it completely. That is possible as well, you just have to delete the words “Content 1”. 

Now, the visuals can be selected. For each Tab Item, you can choose to have one of the following visuals in the tab: “Image”, “Video” or “Iframe”. Of course, you can also leave them out completely. If you would like to know more on how to upload or add an image, video or map, please have a look at the tutorials or manuals about that. 

TO NOTE: You can only enter one of those. It is not possible to put an image AND a video AND a map into one Tab Item.

 As soon as you have put in the map, image or video, you can choose the position you would like to have it in. By default, it will be on the left-hand side of the text, but you can also choose to display it on the right or below the text.

Text Component 

What is it? 

The Text Component is our most commonly used component. As the learning pages are ways to present content in an interesting way, the text is necessary 7/10 times. Of course, you can use other components with videos and images as well, but the text component is also easily combinable with an image or video component.

How to add a Text Component?

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. Search for the “Text” component, click on it and “Insert Component”. By doing so, the empty component is added to your learning page. 

On the right side, we have the editor. 

 Here you can first select the number of items you would like. This refers to the different Text items with their own title, subtitle, and/or text. By increasing the number here, more items will appear on the left. You can add as many as you like. After that, you can also change the background color of the Text component.

Below the editor, we have the content of the text item. 

When you click on either the title, subtitle or the text of the content on the left, a new editor on the right appears. This one is called “Text Item1”. Here you can decide on the position of that Item. It might be that you would like to put the 3 rd Item in the 1 st place, therefore you can switch it up here. Following that, you can turn the Title, Subtitle, and Text on and off for each item individually. 

This means that the first Item could have a Title, subtitle, and Text part, whereas the upcoming items only have a subtitle and text part. Lastly, you can also change the alignment of the text to the right, center, or left

Column Component 

What is it? 

The Column Component is commonly used as an Introduction to Social Media accounts, to present the tools used within the company, highlight the company values, or introduce team members. For each column, a different image, (sub-) title, and content can be provided. 

How to add a Column Component? 

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. The Column component will be the second one in line. Click on it and then click on “Insert Component” at the bottom of the pop-up. By doing so, the empty component is added to your learning page. 

 Now, let's take a look at the editor , on the right side. 

Here you can first select the variation of the component you would like to work on. For the Column component there are two variants. One with bigger and one with smaller images. 

This can be changed throughout the whole editing process, so you can see which variant works best for your content. Below that you can also let the Title and Subtitle of the whole column component appear or disappear to your preference. 

As you might have noticed, there is another button in the editor below the aforementioned ones, which is called “Swipeable on Mobile”. As the name of the button already explains, the columns can become swipeable when you are using your mobile phone to open the app. 

Therefore, it becomes more user-friendly on a small screen. If you do not tick this box, the mobile phone user will see all column items below each other. 

The last item on the editor of the column is the change in the number of items. This refers to the separate columns that will be visible within one component. The amount is limited to 8 column items (2 rows of four columns). By increasing the number here, more items appear on the left.

TIP: If you want to add more than 8 column items, just go ahead and create another Column component beneath it. It will just look like one.

As we have finished the column editing for now, we can go to the column items. When clicking on the first column item, another editor on the right-hand side appears, which is named “Column item 1”. An editor like this will appear for each item of the columns. Therefore, you can individually set up each item to your liking. On the top of the editor you can vary the position of it.

TIP: If you want to know more about how to add an image, please look at the tutorial created for that. Lastly, you can change the alignment of the text for each item. 

TO NOTE:  When you enter an image for each column item, it will change the size of the image according to your cropping. Therefore, to create an even layout, crop all of the images in the same way.

Timeline Component 

What is it? 

The Timeline Component is commonly used to represent different points in time, as the name already says. Each individual element can be timed according to the onboardees’ startdate and therefore serves perfectly to represent the Onboarding Journey for example. Next to that, most of our customers also use it as a way to represent the company history or even take it out of the timeframe and show the learning and development possibilities. Each of the Timeline Items can have its own image, button, content and timing. So, you can really give an individual take on each aspect. 

How to add a Timeline Component? 

 Start by creating a Timeline component. You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. Select the Timeline component and click on “Insert Component”. By doing so, the empty component is added to your learning page. 

Let's take a look at the editor, on the right. 

Here you can first select if you want to have a title and/or subtitle for the whole component. 

Below that, you can change the bar color. This color refers to the color of the line that ties all individual items together. If you time each individual item, some might be available to the onboardee immediately after getting access to the application, whereas others are timed for a later stage like 7 days before start date for example. Therefore, you will have active and inactive items. 

TIP: In the Onboarding journey, make sure to select different colors, as it will be clearer to the onboardee than on which stage of the journey he/she is. 

TIP: If you do not want to use the timing at all, just make everything available 365 days before the start and select an “active” color to make it all look the same. Lastly, you can select the number of items. This refers to the different items of the timeline that are on the line. By increasing the number here, more items will appear on the left. 

Of course, more items can be added/taken away at a later stage as well.

The next step is to have a look at the content of the timeline.

By clicking on the title and/or subtitle on the left a small editor appears where you can change the alignment of the text. 

You can choose to show the text centered or left-/right-oriented. Here we will select the centered alignment. Now, going one step down, we can see the individual timeline item. Here, by default an image is activated, as well as the title, subtitle and button. Of course, these can be turned off and on to your liking. When clicking on this first item of the timeline, a bigger editor will appear on the right-hand side. 

This is called the “Timeline Item 1”. An editor like this appears for each item of the timeline. Therefore, you can individually set up each item to your preference. On the top of the editor, you can select the timing of this individual item. You can change it to be “active” a certain amount of days before or after the start date. The timing has an effect on the color of the bar changes accordingly for the onboardee and also it will have an effect on the availability of the button. 

NOTE: So, if you want the onboardee to be able to click on the button immediately when he/she can see this whole page, set the timing to the same timing as the learning page. However, if the button should become available just after a certain time, make sure to adapt the timing accordingly and describe that the button will become available at a later stage in your text part of the item.

Video Component 

What is it?

The Video Component is commonly used to introduce the onboardee to several departments, his/her own team or to the product. For each video you add, you can enter a different title and subtitle, which makes it clearer if you add several videos on one page.

How to add a Video Component?

You can do this by clicking on the “Plus” sign that appears when you hover on the empty learning page. Now, you get an overview of all components you can enter. The Video component will be the forth one in line. Click on it and then click on “Insert Component” at the bottom of the pop-up.

Let's take a look at the editor on the right side. 

In the editor, you can first see the “Video URL”. Just copy and paste the URL of your video.

TO NOTE: Our platform only allows URL links for videos that are hosted on YouTube or Vimeo. If you do not have a Youtube or Vimeo account yourself, please reach out to your Customer Success Manager and send us the videos you would like to use and we can host it (anonymously) on our Vimeo account. 

Below that you can also select the Title and Subtitle of the video and choose to let it appear or disappear to your preference. Next to that you can also choose an alignment for the title. If you would like to incorporate a video into another component, just add the URL of Vimeo or Youtube to that component (Media + Text, Slalom, Tab, or Accordion)