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. 

Copy
1
// To debug this code, open wixDefaultCustomElement.js in Developer Tools.
2


3
const IMAGE_URL = 'http://wix.to/vUBXBKU';
4
const H2_TEXT = 'This is a Custom Element';
5
const H3_1_TEXT = 'View its code by clicking the Settings button and pasting the Server URL into a new browser tab.';
6
const H3_2_TEXT = 'Explore this code and use it as a reference to create your own element.';
7
const DEBUG_TEXT = 'Loading the code for Custom Element \'wix-default-custom-element\'. To debug this code, open wixDefaultCustomElement.js in Developer Tools.';
8


9
const createImage = () => {
10
  const imageElement = document.createElement('img');
11
  imageElement.src = IMAGE_URL;
12
  imageElement.id = 'wdce-image';
13
  return imageElement;
14
};
15


16
const createH2 = () => {
17
  const h2Element = document.createElement('h2');
18
  h2Element.textContent = H2_TEXT;
19
  h2Element.id = 'wdce-h2';
20
  return h2Element;
21
};
22


23
const createH3 = (id, text) => {
24
  const h3Element = document.createElement('h3');
25
  h3Element.id = id;
26
  h3Element.textContent = text;
27
  return h3Element;
28
};
29


30
const createTextContainer = () => {
31
  const textContainer = document.createElement('div');
32
  textContainer.id = 'wdce-text-container';
33
  textContainer.appendChild(createH2());
34
  textContainer.appendChild(createH3('wdce-h3-1', H3_1_TEXT));
35
  textContainer.appendChild(createH3('wdce-h3-2', H3_2_TEXT));
36
  return textContainer;
37
};
38


39
const createImageContainer = () => {
40
  const imageContainer = document.createElement('div');
41
  imageContainer.id = 'wdce-image-container';
42
  imageContainer.appendChild(createImage());
43
  return imageContainer;
44
};
45


46
const createStyle = () => {
47
  const styleElement = document.createElement('style');
48
  styleElement.innerHTML = `
49
    wix-default-custom-element {
50
        background-color: #f0f4f7;
51
        display: flex;
52
        height: 100%;
53
        width: 100%;
54
      }
55


56
    #wdce-image-container {
57
        width: 35%;
58
        max-width: 165px;
59
        display: flex;
60
        margin: 0 20px 0 30px;
61
        overflow: hidden;
62
    }
63


64
    #wdce-image {
65
        width: 100%;
66
        min-width: 100px;
67
    }
68


69
    #wdce-text-container {
70
        display: flex;
71
        flex-direction: column;
72
        width: 65%;
73
        justify-content: center;
74
        max-width: 314px;
75
        min-width: 200px;
76
    }
77


78
    #wdce-h2 {
79
        font-family: Helvetica Neue;
80
        font-size: 16px;
81
        font-weight: 500;
82
        letter-spacing: 0.89px;
83
        color: #32536a;
84
        margin: 0 0 16px 0;
85
    }
86


87
    #wdce-h3-1, #wdce-h3-2 {
88
        font-family: Helvetica Neue;
89
        font-size: 14px;
90
        font-weight: 300;
91
        line-height: 1.43;
92
        color: #162d3d;
93
        margin: 0 0 8px 0;
94
    }
95
    `;
96
  return styleElement;
97
};
98


99
class WixDefaultCustomElement extends HTMLElement {
100
  constructor() {
101
    super();
102
    console.log(DEBUG_TEXT);
103
  }
104


105
  connectedCallback() {
106
    this.appendChild(createStyle());
107
    this.appendChild(createImageContainer());
108
    this.appendChild(createTextContainer());
109
  }
110
}
111
customElements.define('wix-default-custom-element',  WixDefaultCustomElement);

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.
Was this helpful?
Yes
No