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.

Screenshot showing the export popover with the embed item
Screenshot showing the export popover with 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.

Screenshot of the embed modal for iframe
Screenshot of the embed modal for iframe

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:

Stephen Leo's Data Science Blog
Stephen Leo's Data Science Blog
snappify Blog Post
snappify Blog Post

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:

Rasterly Blog Post
Rasterly Blog Post
Any questions?
Don't hesitate to ask them! ๐Ÿ‘‡