The ThingLink editors provide 4 main tag formats to help you find the right layout for your tag content. Below you will find an image and description of each tag type along with simple examples.
Use the links below to quickly jump to:
- Multipurpose text & media tag that adapts its layout as you add content
- 'Add content from website' tag. This tag allows you to embed third-party iframes or YouTube/Vimeo videos.
- Tour tag that links ThingLink scenes together
- Text label tag that displays text on hover
- Explanations regarding image and video cropping
- Using bold text and italics
Do you prefer video tutorials? Check out this article: [Video] How-to use the ThingLink editor
1. Text & media tag
This tag serves multiple purposes and adjusts the layout based on the content. I It allows you to combine text, images, videos, links and backgroud audio. Explore the image below to get acquainted with its interface.
There are multiple possible layouts for this tag:
Filling in ‘Description’ and/or ‘Title’ will create a tag with just text. The description text will be aligned to the center if there are less than 4 lines of text. If there are 4 or more lines of text, it will align to the left. This logic persists when adding other elements, such as links (buttons) and images.
The link field is used for creating a link button that will redirect the user to another web page when clicked. You can add a link by entering the URL into the corresponding field. If the ‘button text’ field is left empty, the button will show a shortened URL-address for the link. Otherwise, the button will display the text that you put into the ‘button text’ field.
Adding an image or a video while leaving other fields empty will create a tag that displays just the image/video. Adding multiple media will allow user to view them by clicking on the arrow buttons. This also applies to other layouts that use images.
Combining image/video and description will create a tag that shows the description text at the bottom of the image. There is no character limit, but if you add more than 7 lines of text it will take up half of the container and become scrollable.
Combining media with a title and/or link button will result in a tag that shows said media on the left and all other content (title, description and link button) on the right. In this layout, you can click the image or video to view it in full and click again to show the whole layout.
Please note that media inside the tags will be cropped in order to meet the aspect ratio requirements.
Each tag can also contain a pre-recorded background audio that will play automatically. Alternatively, you can record your own voice directly into a tag. Learn more here.
2. Add content from website.
This tag comes as a replacement for 'Add video' and 'Embed code' tag by combining the capabilities of both! It allows you to add different third-party or ThingLink code to create interactive experiences within the scene. This includes:
- Embedding videos from YouTube, Vimeo or FlipGrid via a link;
- Embedding surveys and quizzes (e.g Google Form);
- Embedding maps (e.g. Google Maps);
- Embedding other ThingLink scenes to be viewed within in a tag – an alternative to tour tags described below;
- Embedding whole presentations from SlideShare or Google Slides;
- Embedding webpages (e.g. Wikipedia). Please note that some sites prohibit embedding their webpages, so you won't be able to display them in this tag.
In general, you can embed content from most web services that provide the embed code, although in some cases the functionality may be limited. This article describes how to get the embed code for some of the most popular use cases.
3. Tour tag.
This tag, when clicked, takes the viewer away from the current image, and on to the page of another ThingLink image, video, or 360 image. Use this tag to move from one creation to another.
The tag icon will change to a small thumbnail of the destination scene when the viewer hovers over it. In addition to that, you can add a short (30 characters) description text to let the viewer know where the tag leads.
All scenes used in a tour can be accessed from the bottom right corner by clicking on the cards button. It is possible to include multiple tour links within one ThingLink.
Check out how this works below, and see this article to learn more about the preview icon update.
Once the viewer transition from the first scene in your tour, two buttons will be added to the top left corner:
- 'Back' button, which takes the viewer to the previous scene
- 'Home' button, which takes the viewer to the first scene in your tour
4. Text label tag.
This tag displays up to 100 symbols when hovered over.
How ThingLink crops and adapts images and videos to fit into tags
The editor will always crop all images and videos to fit 8:9 or 16:9 aspect ratio. 8:9 ratio is used when you combine media with a title or a link button, while 16:9 ratio is used for plain media, media + description or extended media view.
PNG images are an exception to this rule as they do not get cropped. The editor adds paddings to ensure that the image fits into tag.
If you need to add a very tall or wide image, consider uploading it as a separate scene. This would allow you to add it to another image as an iframe embed that does not change the aspect ratios as much as the 'text & media' tag.
Explore the tag below to see how this works in practice.
We are still working on a better solution for the aspect ratio issue. If you'd like to provide feedback, please contact us at support@thinglink.com
Using bold text and italics
You can use markdown to style your text in the 'Description' field in the text & media tag as well as the text label tag.
- Putting text between two asterisks (*example*) will make it bold. See tag #1 in the image below.
- Putting text between two underscores (_example_) will turn it to italics. See tag #2 in the image below.
- You can combine bold with italics by using both asterisks and underscores. See tag #3 in the image below.
Please note that the final result may differ based on the viewer's browser. For instance, bold text is nearly identical to normal in Firefox.
Comments
0 comments
Please sign in to leave a comment.