How to Add a Code Embed Element in Webflow
In this article
Learn how to easily integrate custom code into your Webflow project by adding a Code Embed element to your design.
Explore more Webflow tutorials with interactive Saltfish walkthroughs.
Here's how to add a code embed element in Webflow
- Open the Add Elements Panel
To begin, click the "Add" button located on the left sidebar of your Webflow designer interface. This action will open the Elements panel, where you can find various design components.
- Access the Search Bar
Within the newly opened Elements panel, locate and click on the "Search elements" textbox. This search bar allows you to quickly find specific elements without manually scrolling through categories.
- Search for Code Embed
In the search bar, type "Embed". As you type, the list of elements will filter, displaying the "Code Embed" element, which is used for inserting custom code snippets.
- Add the Code Embed Element
Once the "Code Embed" element appears in the search results, click and drag it. Position the element over your design canvas and release your mouse button to drop it into your project.
- Verify Element Placement
After dropping, the Code Embed element will be visible on your canvas. You can now select it to open a code editor where you can paste your custom HTML, CSS, or JavaScript code.
Your turn to show how it works.
Build a walkthrough of your product with Saltfish, then share it with your customers.
Frequently Asked Questions
The "Add" button is located on the left-hand sidebar of the Webflow designer interface, typically represented by a plus icon.
Webflow
