So you're looking to embed a Patches project to your website? You're in luck.
Getting the embed code is incredibly simple. Just publish a public project, open it and click on the Share-icon.
By clicking on it, you will open up a "Share this" dialog-window. At the bottom of this dialog-window you will see an arrow left of the "Embed code" text. Click on it.
Select the Embed code by clicking on it, and copy it to your clipboard.
You can add this code to any HTML Code block you might have accessible to you on various blogging platforms. Simple.
However, we receive far far far more questions on how to tweak the embed to your preference.
To comprehend what's going on, let's look at a typical public published Patches project.
The elements of your Patches project
When viewing a Patches project as an embed on your browser, your attention might be drawn to the icons at the bottom of the screen:
- The Vizor logo
- The name of the project
- The name of the user that published project
- The VR icon to enter VR
- The Fullscreen icon to enter Fullscreen
- The Edit icon to duplicate the project and edit it in the Patches editor
- The Share icon for sharing the URL or getting the embed code
These seven elements are referred to as the header. Not everyone wants to see these, or show them to their clients.
Luckily we have a solution for this issue! All you have to do is add a few words and characters to the embed code and we're there!
In order to hide the header - removing all the controls (VR, Fullscreen, Edit, Share), just add noheader=true.
If you want to start playback of the project - just add autoplay=true at a specific segment in the embed code.
If you want to play around with aspect ratio and proportion, put in your desired width:height, for instance data-aspect="1.33". If you don't add any data-aspect settings, the iframe will default to the standard 16:9 aspect ratio.
These allow you to go from the rigmarole below
to not having to press Play to start the project and never having to see those icons again.
Note: If your Patches project is playing audio, and you embed more than one on your website with autoplay=true, you're going to experience artistic cacophony. Beware!
Embed-what? I'm not a coder! Help!
While the above might seem complex, it's actually something even us mere mortals can tackle. Let the customization begin.
Now, visit your published public project and click on the Share -icon again, and copy the embed code to your clipboard and from there to your blog-post.
Here is an example of an embed code:
<script src="//patches.vizor.io/scripts/embed.js" data-vizorurl="//patches.vizor.io/embed/esaruoho/rosettastone" ></script>
In order to hide the interface buttons (VR, Fullscreen, Edit, Share), you can modify the code to look like this:
<script src="//patches.vizor.io/scripts/embed.js" data-vizorurl="//patches.vizor.io/embed/esaruoho/rosettastone?noheader=true" ></script>
As you can notice, the only real difference is the added ?noheader=true. The question mark is a part of the universal query syntax.
If you were to wish to add automatic playing into this project's embed code, you would have to add &autoplay=true behind the ?noheader=true.
Witness the result:
<script src="//patches.vizor.io/scripts/embed.js" data-vizorurl="//patches.vizor.io/embed/esaruoho/rosettastone?noheader=true&autoplay=true" ></script>
Maybe you just want the project to start playing immediately, but would prefer to keep seeing the icons on the header. In that case, you would remove noheader=true& and just retain the ?autoplay=true.
<script src="//patches.vizor.io/scripts/embed.js" data-vizorurl="//patches.vizor.io/embed/esaruoho/rosettastone?autoplay=true" ></script>
Simple!
P.S. Pay very close attention to autoplay=true - if there is music in the Patches project you wish to embed on your page, be kind and courteous and only set autoplay to true if you are absolutely sure the visitor will not freak out. Also, unless if you are creating an artistic project with multiple embeds emitting sound at the same time, be wary of having more than one sound-source on a website, lest you overpower the visitor with walls of sound.
Here is an example of a functioning embed that automatically starts loading when you enter this blog-post:
Have fun embedding, and join our Public Slack in case you have some questions on your mind or wish to share your amazing Patches project embed.