Introduction

Custom elements are web components that let you add custom HTML, CSS, and JavaScript to extend your site's functionality beyond the built-in editor. They follow the Web Components standard and can integrate with any JavaScript ES6 library or framework that follows HTML5 standards.

You may want to use custom elements in the following scenarios:

• Build advanced components with functionality beyond standard offerings.
• Implement custom CSS for greater design flexibility.
• Create reusable components for consistency across multiple projects.

How to work with custom elements

The following steps describe the general flow for working with custom elements:

1. Code the custom element and its behavior in a JavaScript file using any IDE.
2. In the site editor, add a custom element to the site.
3. Using Velo, handle events and pass data between your site and the custom element.

Hosting

You can host custom elements on Wix or an external server.

• Wix-hosted (recommended): Integrates directly with your Wix site, simplifies deployment, and ensures compatibility with Wix's infrastructure.
• Externally-hosted: Provides full flexibility but requires HTTPS and proper configuration to communicate with your Wix site.

SEO

SEO for custom elements is handled through Velo code by defining seoMarkup. This approach applies to both Wix-hosted and externally-hosted elements. Without proper SEO markup, only JavaScript-enabled crawlers, like Google, will index the content.

Troubleshooting

If you're experiencing issues with custom elements, consider the following potential causes:

• A custom element may not be visible if browser settings block communication between the local development environment and the server.
• Custom elements might appear differently in preview and live sites because they are rendered in an iframe during editor and preview modes.
• Custom elements can alter the page layout by modifying the page height.