Embed Snaps via an iframe

Learn how to embed beautiful code snippets on your own website / blog

---

Snappify gives you the ability to embed your snaps in an interactive way (users can easily copy the code) on basically any website via an iframe.

Some example use cases are:

• A technical blog where you're describing some code
• Docs where you're showing off code examples
• Any other website / webapp where you want to show off interactive code snippets 😄

How to

When you're on the snappify Editor hover over the "Export" button, and click on the "Embed" item.

The embed modal opens up and the iframe Tab is opened by default. There you can see the desired HTML snippet for embedding the snap into your website.

As you can see on the modal is a checkbox to toggle the responsive mode of the embedded snaps. Let's learn more about making your snaps responsive. 👇

Responsive Snaps

By default the checkbox for making the embedded snaps responsive is checked. That means that your snap will shrink in size on smaller screens and will be centered on larger screens.

This means that snappify takes care of displaying your snap in an responsive way so that it won't be cut-off on mobile devices. Here you can see is a real example of an responsive embedded snap (will be scaled down on mobile devices):

Examples

Here you can see some real world examples of responsive snaps:

Do you have embedded snaps on your website? Send them to us, we'd love to add them to our examples!

Fixed Size Snaps

Here you can see the same snap as above, but in the non-responsive mode so it won't be scaled down automatically. It will preserve its size and the user can scroll to view the full snap on smaller screens.

Examples

Here's a real world example of fixed snaps. The user created two versions (mobile and desktop) and displays them accordingly, depending on the screen size: