👈  Clickable Assets

Make your world more engaging with website links, portals, teleporting, and embedded websites, images, or PDFs.

👈  Create Clickable Assets in Your World
💬  Display Text
🌄  Display an Uploaded Image
🔗  Embed an External Website
📺  Embed YouTube, Vimeo, or Twitch as an iframe
📃  Embed an External Image, Document, or PDF

👈  Create Clickable Assets in Your World

Make your world more engaging with website links, portals, teleporting, and embedded websites, images, or PDFs.

Every asset in your world can become clickable, making your Topia experience more immersive. Clicking on an asset can display text or an uploaded image; open a website (embed or in a new tab), a video, a web hosted image or pdf; let you portal to another Topia world, or teleport to another location within the same world.

💬  Display Text

With but the flick of your Topi's wrist-arm-like-appendage, you are able to display custom text when an asset is selected.

• Make sure Edit Mode is on and the Edit toggle on the toolbar is blue

• Hover over the asset and click the pencil icon

• Click Edit from the drop down menu to open the Modify Asset drawer

• Click Links

• On the Links page, select Display text to add text

🌄  Display An Uploaded Image

Indeed, with but a second wrist flick, you are able to display an uploaded image when an asset is selected.

• Make sure Edit Mode is on and the Edit toggle on the toolbar is blue

• Hover over the asset and click the pencil icon

• Click Edit from the drop down menu to open the Modify Asset drawer

• Click Links

• On the Links page, select Display an Uploaded Image and unleash the power of images when an asset is clicked!

🔗  Embed an External Website

Create more engagement by adding a website link to an asset. The link will either open in an embedded iframe within Topia or in another browser tab depending on whether the website allows website embeds.

Follow these simple steps:

• Make sure Edit Mode is on and the Edit toggle on the toolbar is blue

• Hover over the asset and click the pencil icon

• Click Edit from the drop down menu to open the Modify Asset drawer

• Click Links

• On the Links page, select Open a website link

• Enter the website URL under the Web Link field

• If you want the link to displayed in a separate tab rather than in an embedded frame, modify the URL by removing the "s" from "https":

  Original URL:

  https://www.example.com/

  Modified URL:

  http://www.example.com/
  

• Enter a name in the Web Link Title field. If the website allows embedding, the title will appear at the top of the website embed frame

Check out a few of our favorite external games & embeds here!

📺  Embed YouTube, Vimeo, or Twitch as an iframe

Once an asset is placed in a world, you can easily make it a clickable object that opens a YouTube, Vimeo, or Twitch video by doing the following:

• Toggle on Edit Mode

• Hover over the asset and click the pencil icon

• Click Edit from the drop down menu to open the Modify Asset drawer

• Click Links

• On the Links page, under select Open a website link

• In the link field, enter the one of the following urls and modify as described below:

  YouTube:

  https://youtube.com/watch_popup?v=xxxxxxxxx 

  Vimeo:

  https://player.vimeo.com/video/xxxxxxxxx

  Vimeo showcase:

  https://vimeo.com/album/xxxxxxxxx/embed/

  Twitch:

  https://player.twitch.tv/?channel=xxxxxxxxx&parent=topia.io

• Replace the “xxxxxxxxx” with the unique code found at the very end of your video’s url or the name of the Twitch stream

• Enter a name for the video under Web Link Title. This name will appear at the top of the video

Now, when a user in the world clicks on the object, an embedded iframe of the video will appear. If the video is live-streaming, it will be synced for all who are viewing it.

📃  Embed an External Image, Document, or PDF

PNGs, JPGs, JPEGs, and WEBP, oh yes! Any asset can open a statically hosted image, document, or PDF when clicked. This can be great for creating an interactive scavenger hunt or for displaying info throughout a world. Users who then click an asset with an embedded image can view the file in world.

In order to add an image, document, or PDF, the file must have a unique URL. This can be done by uploading the file to: a personal website, Google Drive, Dropbox, Imgur, AWS S3 Bucket, etc. Add the unique URL just as you would add a link to any website:

• Make sure Edit Mode is on and the Edit toggle on the toolbar is blue

• Hover over the asset and click the pencil icon

• Click Edit from the drop down menu to open the Modify Asset drawer

• Click Links

• On the Links page, select Open a website link

• Enter the website URL under the Web Link field. The link may need to be modified to ensure that it will embed:

  on Google Drive:

  • Ensure share settings are set to Public. Double click on the file or click on Preview to open the file. (Do not use a direct share link, such as the link shown in your browser’s address bar or Google Drive share options.)

  • In the window that opens, click again on More actions in the top right-hand corner (three vertical dots icon) and choose Open in a new window

  • Copy the url that appears in this new window and use this url instead to make the clickable asset show the content in an iframe.

  • In the new window, click again on More actions in the top right-hand corner (three vertical dots icon) and choose Embed item...

  • Copy the url from within the embed script, shown between the ” ” quotation marks

  on DropBox:

  • Click Share. Create then copy the link.

  • Remove the "dl=0" at the very end of the link and replace it with "raw=1"

    Original URL:

    https://www.dropbox.com/s/4............h/example.png?dl=0

    Modified URL:

    https://www.dropbox.com/s/4............h/example.png?raw=1

  on Imgur (images only):

  • Right click on the image and choose Open Image in New Tab.

  • Use the link from the new tab if it ends with ".png", if instead it ends in ".jpeg" or ".jpg", replace it with ".png".