Wix Studio Custom Elements: A Better Alternative to HTML Embed?
- Aug 7
- 4 min read
HTML Embed is useful for third-party widgets and isolated applications. But when custom functionality is part of the website itself, Wix Studio Custom Elements are often a better solution.
Custom Elements are based on the Web Components standard. They support custom HTML, CSS, JavaScript, attributes, events, and reusable component logic. Wix Studio lets you connect them to either a Wix-hosted Velo file or an external HTTPS JavaScript file.
Their biggest practical advantage over an HTML Embed is simple: they can participate in the page layout and change its height when their content changes.
What Is a Wix Studio Custom Element?
A Custom Element lets you create your own HTML element, for example:
<pricing-calculator></pricing-calculator>You define its behavior in JavaScript and then add it in Wix Studio through:
Add Elements → Embed & Social → Custom Element
Wix recommends hosting the JavaScript file with Wix through Velo, although external HTTPS files are also supported. The tag name must contain at least two words separated by a dash.
A basic Custom Element looks like this:
The Biggest Advantage: Dynamic Height
This is one of the most important differences between a Wix Custom Element and HTML Embed.
An HTML Embed runs inside an iframe with its own dimensions. Wix notes that embedded content can be cropped when its dimensions exceed the iframe container, so sizing has to be managed explicitly.
A Custom Element can instead alter the page layout by modifying page height. Wix lists this behavior directly in its Custom Element documentation.
This matters for components such as:
accordions;
dynamic search results;
product configurators;
expandable cards;
filters;
calculators with conditional fields.
If the content grows, the component can grow with it instead of being trapped inside a fixed-height iframe.
For dynamic UI, this can remove an entire layer of iframe-resizing logic.
Custom Element vs HTML Embed
The choice is usually straightforward:
Use HTML Embed for external applications.
Use Custom Elements for custom functionality that belongs to the Wix Studio website.
Attributes Instead of postMessage()
HTML Embed communication usually relies on postMessage().
Custom Elements can receive data through attributes instead. Wix supports changing Custom Element attributes from page code, while the Web Component reacts through attributeChangedCallback().
For example, your page can set a product ID and the component can respond when it changes.
Wix Studio also lets you configure attributes directly from the Element Attributes panel without editing the component file. The JavaScript must still handle those attributes.
Custom Events
Communication can also go in the opposite direction.
A Custom Element can dispatch a standard CustomEvent, which page code can listen for. Wix recommends events and attributes as the primary communication model between page code and Custom Elements.
That creates a cleaner component API than maintaining multiple iframe message types such as READY, UPDATE_HEIGHT, SET_PRODUCT, and RESULT.
Web Component Lifecycle
Because Wix Custom Elements use standard Web Components, you also get lifecycle callbacks:
connectedCallback() — initialize and render the component.
attributeChangedCallback() — react to attribute changes.
disconnectedCallback() — clean up listeners, observers, or timers.
This makes the component easier to structure and reuse than a collection of unrelated HTML Embed scripts.
Custom Element code itself uses standard ES6 JavaScript and cannot call Velo APIs directly. Instead, Velo runs in page code and exchanges data with the component through attributes and events.
Reusable Components
Custom Elements work especially well for UI that appears across multiple pages or projects.
Good examples include:
comparison sliders;
pricing calculators;
advanced galleries;
product configurators;
custom filters;
interactive cards;
navigation components.
The HTML, CSS, component logic, attributes, and events can remain inside one reusable JavaScript component. Wix specifically lists reusable components and advanced custom functionality as common Custom Element use cases.
SEO and Preview Mode
Wix provides seoMarkup for Custom Elements. This is useful when the component contains content that should be indexed. Without appropriate SEO markup, indexing depends on crawlers rendering the JavaScript content.
There is also one important Studio-specific detail:
Custom Elements are rendered inside an iframe in the Editor and Preview for security reasons.
This can affect how the layout looks while developing. Wix recommends checking the published website to evaluate the actual live behavior.
When Should You Use a Wix Custom Element?
Choose a Custom Element when you need:
dynamic component height;
custom UI integrated into the page;
reusable functionality;
attributes and events;
Web Component lifecycle methods;
advanced HTML, CSS, or JavaScript;
tighter integration with Wix page code.
Use HTML Embed when the content is primarily an external or isolated application.
For expandable and dynamic interfaces, dynamic height is often the deciding factor.
FAQ
What is a Custom Element in Wix Studio?
A Custom Element is a Web Component that adds custom HTML, CSS, and JavaScript functionality to a Wix Studio website. It can be hosted with Wix or on an external HTTPS server.
Can a Wix Custom Element have dynamic height?
Yes. Wix documentation notes that Custom Elements can modify the page layout by changing page height.
Is a Custom Element better than HTML Embed?
For custom UI built specifically for the Wix site, usually yes. HTML Embed remains better suited to isolated external widgets and applications.
How does a Custom Element communicate with Velo?
Page code can send data using attributes, while the Custom Element can communicate back using custom events.
Can I host a Custom Element on Wix?
Yes. Wix supports both Wix-hosted Velo files and external JavaScript files. Wix-hosted files are the recommended option.
Real-World Custom Element Example
For a client project, we built a custom vehicle listing component as an advanced alternative to a standard Wix repeater.
Each vehicle card can display multiple media types in the same interface — image galleries, video, and interactive 360° views — while keeping the layout responsive and dynamically adapting to the content.
This approach gave us more control over the card structure, media behavior, and interactions than a standard Wix repeater, while keeping the component reusable across the vehicle catalog.
Live example: Vanguard Automotive — Auto Catalogus
