How To Add A Snapchat Widget

Adding a Snapchat widget to your website can be a fun and engaging way to connect with your audience and show off your Snapchat content. In this article, I will guide you through the process of adding a Snapchat widget step by step, sharing my personal experiences and insights along the way.

What is a Snapchat Widget?

If you’re not familiar with widgets, they are small applications or tools that can be embedded into a website to provide additional functionality and enhance the user experience. A Snapchat widget specifically allows you to display your Snapchat content, such as your Snapcode or recent snaps, directly on your website.

Step 1: Create a Snapchat Account

If you don’t already have a Snapchat account, you’ll need to create one before you can add a Snapchat widget to your website. Head over to the Snapchat sign-up page and follow the instructions to create your account.

Step 2: Access the Snapchat Developer Portal

To add a Snapchat widget to your website, you’ll need to access the Snapchat Developer Portal. Go to the Snapchat Kit website and sign in with your Snapchat account credentials. Once you’re logged in, navigate to the Developer Portal.

Step 3: Create a Widget

Once you’re in the Snapchat Developer Portal, you can start creating your widget. Click on the “Create a Widget” button and select the type of widget you want to create. For example, you can choose to display your Snapcode or a collection of your recent snaps.

Customize your widget by choosing the layout, color scheme, and size that best match your website’s design. You can also add a title and description to provide context for your widget.

Step 4: Generate the Embed Code

After you’ve finished customizing your widget, click on the “Generate Embed Code” button. This will generate the HTML code that you’ll need to add to your website to display the widget.

Copy the generated code to your clipboard and move on to the next step.

Step 5: Add the Widget to Your Website

Now it’s time to add the Snapchat widget to your website. Open your website’s HTML editor or content management system and navigate to the page where you want to display the widget.

Paste the embed code you copied earlier into the appropriate location on your web page. Make sure to save the changes to update the page with the new Snapchat widget.

Step 6: Test and Customize

Once you’ve added the Snapchat widget to your website, it’s important to test it to ensure it’s working correctly. Open your website in a web browser and navigate to the page where you added the widget. Check that the widget is being displayed properly and that any interactive elements are functioning as expected.

If you’re not satisfied with the appearance or functionality of the widget, you can go back to the Snapchat Developer Portal and customize it further. Make any necessary changes and generate a new embed code to replace the previous one on your website.


Adding a Snapchat widget to your website is a great way to showcase your Snapchat content and engage with your audience. By following the steps outlined in this article, you can easily create and embed a Snapchat widget on your website. Remember to test and customize your widget to ensure it meets your needs and represents your brand effectively.