Go Headless

Build Apps

Client

API Preview

Develop Websites

REST

Velo

GraphQL (Alpha)

# 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](fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) in Javascript and working with [web components](fallback::https://developer.mozilla.org/en-US/docs/Web/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](fallback::https://support.wix.com/en/article/velo-example-coding-based-on-the-custom-element-template#the-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. 

```javascript
// To debug this code, open wixDefaultCustomElement.js in Developer Tools.

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

const createImage = () => {
  const imageElement = document.createElement('img');
  imageElement.src = IMAGE_URL;
  imageElement.id = 'wdce-image';
  return imageElement;
};

const createH2 = () => {
  const h2Element = document.createElement('h2');
  h2Element.textContent = H2_TEXT;
  h2Element.id = 'wdce-h2';
  return h2Element;
};

const createH3 = (id, text) => {
  const h3Element = document.createElement('h3');
  h3Element.id = id;
  h3Element.textContent = text;
  return h3Element;
};

const createTextContainer = () => {
  const textContainer = document.createElement('div');
  textContainer.id = 'wdce-text-container';
  textContainer.appendChild(createH2());
  textContainer.appendChild(createH3('wdce-h3-1', H3_1_TEXT));
  textContainer.appendChild(createH3('wdce-h3-2', H3_2_TEXT));
  return textContainer;
};

const createImageContainer = () => {
  const imageContainer = document.createElement('div');
  imageContainer.id = 'wdce-image-container';
  imageContainer.appendChild(createImage());
  return imageContainer;
};

const createStyle = () => {
  const styleElement = document.createElement('style');
  styleElement.innerHTML = `
    wix-default-custom-element {
        background-color: #f0f4f7;
        display: flex;
        height: 100%;
        width: 100%;
      }

    #wdce-image-container {
        width: 35%;
        max-width: 165px;
        display: flex;
        margin: 0 20px 0 30px;
        overflow: hidden;
    }

    #wdce-image {
        width: 100%;
        min-width: 100px;
    }

    #wdce-text-container {
        display: flex;
        flex-direction: column;
        width: 65%;
        justify-content: center;
        max-width: 314px;
        min-width: 200px;
    }

    #wdce-h2 {
        font-family: Helvetica Neue;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.89px;
        color: #32536a;
        margin: 0 0 16px 0;
    }

    #wdce-h3-1, #wdce-h3-2 {
        font-family: Helvetica Neue;
        font-size: 14px;
        font-weight: 300;
        line-height: 1.43;
        color: #162d3d;
        margin: 0 0 8px 0;
    }
    `;
  return styleElement;
};

class WixDefaultCustomElement extends HTMLElement {
  constructor() {
    super();
    console.log(DEBUG_TEXT);
  }

  connectedCallback() {
    this.appendChild(createStyle());
    this.appendChild(createImageContainer());
    this.appendChild(createTextContainer());
  }
}
customElements.define('wix-default-custom-element',  WixDefaultCustomElement);

```

### Understanding the Code

Because this article assumes you know about designing elements with [CSS properties](fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) in Javascript and working with [web components](fallback::https://developer.mozilla.org/en-US/docs/Web/Web_Components), we will provide here just a high-level overview of the sample code to get you started. See other [MDN resources](fallback::https://developer.mozilla.org/en-US/docs/Web) 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.