TurboWarp can be embedded with a standard iframe:
<iframe src="https://turbowarp.org/414716080/embed" width="499" height="416" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen></iframe>
414716080 with the ID of your project. You can change the width and height of the iframe and the player will automatically resize to fit (499x416 will result in the stage rendering at an undistorted 480x360).
TurboWarp's embeds will have a transparent background if the iframe is allowed to be transparent. TurboWarp's embeds will have a fullscreen button if the iframe is allowed to become fullscreen. The example code above enables both of these feature.
Be careful with unshared projects
You should be aware of upcoming changes to the Scratch API that will prevent the embed from accessing unshared Scratch projects. These changes will affect embeds. To work around this you can make sure the projects you embed are shared or use the TurboWarp Packager instead.
All standard URL Parameters are still available. You can use these to control usernames and other things.
There are also some special parameters only available in embeds:
Embeds support the
autoplay parameter, which will automatically hit the green flag when the project loads. For example: https://turbowarp.org/15832807/embed?autoplay
Note that sound blocks may not work until the user interacts with the project (for example, by clicking). This is a restriction imposed by browsers. There is nothing TurboWarp can do to work around this.
You can optionally enable a settings button in embeds with the
settings-button parameter that opens a similar menu to the "Advanced settings" menu found in the website and editor. For example: https://turbowarp.org/15832807/embed?autoplay&settings-button
Fullscreen background color
Outside of fullscreen mode, the embed is transparent so you can style the parent element if you want to change the background color.
In fullscreen mode, the embed will either use a white or an almost black color depending on whether the user's computer is configured to dark mode or not.
To override this behavior, set the
fullscreen-background parameter to a CSS color value like
rgb(50,90,100). For example: https://turbowarp.org/15832807/embed?fullscreen-background=yellow
You can also use hex colors if you escape the
# with percent encoding:
By default, embeds have no addons enabled. This can be overridden with the
addons parameter, which is a comma separated list of addon IDs to enable. For example: https://turbowarp.org/15832807/embed?addons=pause,gamepad,mute-project
Useful addons and their IDs:
- "Pause button" is
- "Muted project player mode" is
- "Remove curved stage border" is
- "File drag and drop" is
- "Gamepad support" is
- "Reverse order of project controls" is
Other addons will have no effect on the embed.
If you use user-supplied information to generate embed links, you should sanitize any arguments to make sure users can't supply arbitrary URL parameters as some can lead to unexpected behaviors.
Need more control?
If you use a TurboWarp embed in a commercial website, it is in your best interest to donate to us and the projects we rely upon to ensure the embed continues to function smoothly.
TurboWarp is licensed under the GPLv3.0. We believe that an
<iframe> of a GPLv3.0 work doesn't create a derivative work under the GPLv3.0, rather it creates an "aggregate work" which is not subject to the same requirements as derivative works. However, we are not lawyers and this is not legal advice. Talk to a lawyer if this matters to you.