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 in a JavaScript file using any IDE.
  2. In the site editor, add the 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.

Note: You can use third-party custom elements so long as you have their server URL and tag name.

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.

Caution: To avoid issues like cloaking, ensure that the content in your custom element matches the defined SEO markup.

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.
Did this help?