Skip to main content

Introduction

Every day, people use Snapchat to express themselves, live in the moment, and learn about the world around them — whether that’s adding a Lens to a Snap, posting to Stories, Spotlight, or the Snap Map, and more. Web Embeds for Lenses, Spotlight videos, Public Stories, and Public Profiles enable Snapchat experiences to be embedded into articles or websites.

Embed from Snapchat.com

A web embed is a code snippet that allows external content, such as Spotlight, Saved Stories, or Lenses, to be displayed directly within a webpage without hosting the content locally.

How to Embed​

Example Embed

  1. Find content to embed in your site. (ex)
    1. Use snapchat search (snapchat.com/explore/) to find content or use a search engine find snapchat content
  2. Click blue button or embed button on the content:
    1. embed-1.png
  3. Click Copy code:
    1. embed-2.png
  4. Drop code into your website / post

Crying Lens Embed Example​

Source: https://www.snapchat.com/lens/924f374625604452a5d1273dad9d9726

<blockquote class="snapchat-embed" data-snapchat-embed-width="416" data-snapchat-embed-height="692" data-snapchat-embed-url="https://www.snapchat.com/lens/924f374625604452a5d1273dad9d9726/embed" data-snapchat-embed-style="border-radius: 40px;" data-snapchat-embed-title="Crying Lens" style="background:#C4C4C4; border:0; border-radius:40px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:416px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px); display: flex; flex-direction: column; position: relative; height:650px;"> <div style="display: flex; flex-direction: row; align-items: center;">  <a title="Crying Lens" href="https://www.snapchat.com/lens/924f374625604452a5d1273dad9d9726" style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; width: 40px; margin:16px; cursor: pointer"></a>  <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"></div> </div> <div style="flex: 1;"></div> <div style="display: flex; flex-direction: row; align-items: center; border-end-end-radius: 40px; border-end-start-radius: 40px;">  <a title="Crying Lens" href="https://www.snapchat.com/lens/924f374625604452a5d1273dad9d9726" style="background-color: yellow; width:100%; padding: 10px 20px; border: none; border-radius: inherit; cursor: pointer; text-align: center; display: flex;flex-direction: row;justify-content: center; text-decoration: none; color: black;">  View more on Snapchat  </a> </div></blockquote><script async src="https://www.snapchat.com/embed.js"></script>

embed-3.png

Was this page helpful?
Yes
No