Knowledge
How to embed a snippet on Webflow
A guide to embed a Vettify code snippet into your website created with Webflow.com
Mar 12, 2024
Incorporating a Vettify code snippet into your Webflow site enables you to effortlessly showcase images, such as company logos, product visuals, or other key graphics provided by your business partners. This walkthrough is crafted for Webflow users, underlining the process of embedding HTML code seamlessly into your site. Please note that adding an "Embed" element is a feature available to paying accounts on Webflow. Here’s how you can display your partner's image on your Webflow site:
Switch to Design Mode: Start by logging into your Webflow account and accessing your site's dashboard. Navigate to the page where you want the partner's image to appear and switch to the Design mode to enable page editing.
Add an Embed Element: In Design mode, look for the option to add a new element to your page. Select the "Embed" element from the list of available elements. This special element allows you to incorporate custom HTML code into your site.
Place the Embed Element: Ideally, you should place the Embed element within a container on your page. This placement ensures that the image aligns well with your site's layout and design. Drag and drop the Embed element to your preferred location.
Open the HTML Embed Code Editor: Once the Embed element is in place, click on it to open the HTML Embed Code Editor. This is where you'll paste the Vettify code snippet, which contains the HTML code for the image you wish to display.
Paste the Snippet and Save: Copy the HTML snippet provided by your partner through Vettify. Then, paste this snippet into the HTML Embed Code Editor in Webflow. After pasting the code, save and close the editor to apply the changes.
Adjust the Element Size: If necessary, you can edit the size of the Embed element. The Vettify snippet will maintain its initial proportions but adapt to the size of the container or Embed element into which you've placed it. This ensures that the image looks perfect within your site's design.
Preview and Publish: Before making the changes live, take a moment to preview your site. This step lets you see how the image will appear to your visitors. If everything looks good, go ahead and publish your website to update your live site with the new content.
By following these steps, Webflow users can easily enhance their websites with dynamic visual content from their business partners. This guide highlights the simplicity and flexibility of Webflow for customizing and enriching your site's appearance and functionality with important partner images.
Here is a short video that illustrates how to integrate the visual asset received through Vettify on your website built on Webflow:
Feel free to contact us should you have any inquiries or comments. We look forward to hearing from your use cases.
The Vettify team