Make it easier to share, remix and edit your project.
One of the things that makes Glitch special is that, by default, anyone can see the code (view the source) of your project, remix it to make their own version, or embed it onto their website to help others discover your work.
To make this easier, we've made a simple Glitch button that you can embed in our app. It puts a little fish on your site, with a menu giving users simple access to sharing and remixing. (And don't worry — it's totally optional, you don't need to include the button if you don't want to.)
Here's what the Glitch button looks like by default:
How to add a Glitch button
The button will be added to any element with class="glitchButton". For example, this project's index view in views/index.html shows an empty div element.
The button will appear on page load. You can use regular CSS to position it any way you'd like!
Position your button
We don't want to lock you into button position, so to set it yourself you can reference the glitchButton
class in your CSS or use an inline style attribute.
Some cool lil customizations.
We may sometimes want to change the direction of where the fishes' speech bubble displays, so we include some css to position the bubble to the top (position-y-top) or bottom (position-y-bottom), along with left (position-x-left) or right (position-x-right). These classes aren't required - by default, the bubble display shows to the bottom and left.
Here are snippets for different positions:
| default position | position-x-right | position-y-top | position-x-right position-y-top |
|---|---|---|---|
Make your button stacked above all other content
We also don't want to lock you into a specific z-index, so to set it yourself you can use an inline style attribute.
What does it mean to embed?
The embed code the button provides is compatible with anywhere you can paste iframes. This page's embed looks like this:
Note: the button only works on public projects using glitch.me domains (not custom ones).
Why add this button to my project?
Jenn thinks it's a great idea!
Happy Glitch-using!
We want to know about all the cool stuff you're making, remixed or not–let us know it by tweeting @glitch!