Skip to main content
Attention: with Release 1.14 we seperated the Show Website element and the Custom Plugin element. If you had attributes and parameters in your websites please make sure to switch these elements to a “Custom Plugin”.
Add your Website to your Project
Add the Show Website Element by drag and drop the output of the previous element. Select Show Webite from the Menu, which appears when you drop the output. In the sidebar you will see an input field where you can enter the URL (link to your website) of your website. Your website must communicate via HTTPS. HTTP is not supported. Your browser will tell you whether your website communicates in encrypted form (via HTTPS): Image Image Activate the switch and select a time when the website should be closed automatically: The User will always have the option to close the Website with a small x button in the upper right corner. Image

​

​
Check if the website is embeddable

There are websites that prohibit you from embedding. In this case, we cannot display the website. You can test whether your website allows the display by clicking on the “Test URL link” button. Image Image

​
Tips for embedding a YouTube video

To embed YouTube videos, you cannot use the link of the video, but you can use the embed link. Navigate to the YouTube video you want to embed and click the Share button below it. Image Click on “Share” and then “Embed” ** Image ** and copy the link from the code shown: Image

​

​
Play YouTube video on autoplay

Autoplay works when you add ?autoplay=1&mute=1&enablejsapi=1 to the URL. Here’s an example:: https://www.youtube.com/embed/h6I5UOsQNEI?autoplay=1&mute=1&enablejsapi=1 To get the right link for the iFrame, follow the steps above (click Share in YouTube, then Embed and copy the link). Image Instead of the URL of your website, enter #ATTRI/myWebsite in the input field. You can then change the variable myWebsite at runtime with the Set Userattribute & Variables element. Image
Change the style of how the website is displayed (avatar only)
When you add the Show Website element to an **avatar frame **and click on it to display the sidebar, you will see the three options: Settings, Attributes and Params. Image In the settings you will find a drop-down menu where you can select how the website should be displayed: Image
Below we show you what the style will look like:
Fullscreen: ** Image ** Fullscreen with Avatar: Image Half-size: Image Quarter-size: Image Square-size: Image
Add communication between Avatarproject and your website (avatar only)
Access to source code or the ability to program a website is recommended. As well as basic knowledge of Javascript.

​
Communication from plural to the embedded website

In Plural switch to Params: Image Here you have the option to add parameters. These are appended to the URL of the embedded website. You can simply enter a string or you can use the #ATTRI/attributeName, whereby attributeName must be set in your project beforehand. Here is a completed example: Image In the JS script code of the embedded website, you can pass through and use the parameters: 
const uri = window.location.href.split('?');
if (uri.length === 2) {
const params = uri[1].split('&');
return params.map((p)=> p.split('='))
.filter((p)=> p.length ===2)
.filter(([key])=> key ==='name')
.shift()[1];
}
console.log(getURLParameters()); The getURLParameters() function returns an object with the keys and values of the URL parameters.