Velo Example: Coding Based on the Custom Element Template

When you host your custom elements with Velo, a sample wix-default-custom-element.js file is provided in the Public section of your backend files. You can use this JavaScript file as a basis for coding your own elements. 

This article assumes here you know a bit about designing elements with CSS properties in Javascript and working with web components.  

Access the Template to Copy Its Code

You can copy the sample code: 

1. In the editor, select the custom element and click Choose Source. 
2. Paste the Server URL into a new browser tab.
3. Copy and paste the code in your own JavaScript file. 
4. Make changes as necessary.

Alternatively, copy the sample code from this article below.

The Code

When copying the following code sample for your own use, substitute variable, element, and class names and values as necessary. 

Understanding the Code

Because this article assumes you know about designing elements with CSS properties in Javascript and working with web components, we will provide here just a high-level overview of the sample code to get you started. See other MDN resources for more info.

• Lines 1-6: Text to display in the custom element on the page. You can modify these lines as you like.
• Line 7: A tooltip to display in the console that tells you where to look to debug problems.
• Lines 9-98: Defines a style, an image, and text.
• Lines 99-110: Class definition for the custom element. Use the connectedCallback() lifecycle function to create the style, image, and text on the page when the element can connect to the page.
• Line 111: Register the custom element. The tag name in this example is wix-default-custom-element. Enter this tag name in Settings when adding the custom element to the page in the editor.