Knowledge

How to embed a snippet on Framer

A step-by-step guide to embed a Vettify code snippet into your website created with Framer

Mar 20, 2024

Framer landing page - The Internet is your canvas
Framer landing page - The Internet is your canvas
Framer landing page - The Internet is your canvas

In today’s guide, we’re diving into how Framer users (In fact, we're one of them!) can effortlessly integrate a Vettify HTML code snippet into their website. This process allows you to display an image provided by your business partners, enhancing your site with relevant visual content. The snippet might be a logo, product image, or any other graphic that's essential for your website's audience. Let’s break down the steps to make this integration as simple as pie:


  1. Insert a New Embed Element: Begin by navigating to the "Insert" menu in your Framer project. Look for the "Utility" section and select the "Embed" element. This action adds a new Embed element to your canvas, which is where you'll paste the HTML code.

  2. Define the Size of Your Embed Element: Once the Embed element is on your canvas, you can adjust its size according to the space you want the image to occupy on your website. Framer allows you to resize the element directly on the canvas for a perfect fit.

  3. Paste the HTML Snippet: With your Embed element sized appropriately, locate the HTML code box at the bottom section of the element’s settings. This is where you'll paste the Vettify code snippet. Copy the HTML code from the email or document provided by your partner and paste it into this box.

  4. Set the Element’s Location: After inserting the code, you may want to adjust the location of the Embed element on your page. Framer's drag-and-drop interface makes it easy to move the element to the ideal spot, ensuring the image integrates seamlessly with your site's design.

  5. Publish Your Updated Site: With the Vettify snippet now embedded in your website, take a moment to preview your changes within Framer. If everything looks good, go ahead and publish your site. The newly added image will be live and viewable to all your site visitors.


Following this tutorial, we've included a concise video demonstration below. This video, lasting less than two minutes, visually guides you through the process of embedding a Vettify snippet on your Framer website. It emphasizes the ease and simplicity of enhancing your site with essential partner content.


If you have any questions or would like further assistance, please do not hesitate to contact us through our contact form. We look forward to hearing about your experiences and are here to help with any inquiries you might have.


Your feedback and questions not only help us improve but also allow us to offer more relevant content for you and your projects.


The Vettify team


Want a return on investment from your brand?

Leverage our solution to boost your brand's online visibility and pinpoint partners for user base growth.

Want a return on investment from your brand?

Leverage our solution to boost your brand's online visibility and pinpoint partners for user base growth.