Integrating the ITI Digital DXP modules to Wix Websites

ITI Digital has assisted multiple destinations with adding the DXP content via Wix to enhance the front-end user experience. Below are steps for how to embed your new software with the Wix CMS.

1. Begin by turning on Dev Mode. This will allow you to make the necessary updates to the code file.

2. From the left navigation, select "Code Files" and then "wix-default-custom-element.js"

3. This will open the file in the bottom window, beneath the editing pane. Replace any code that currently shows here to the code provided below this screenshot:

const DEBUG_TEXT = 'Loading the code for Custom Element \'wix-default-custom-element\'. To debug this code, open wixDefaultCustomElement.js in Developer Tools.';

const createImGoingContainer = () => {
const imageContainer = document.createElement('app-root');
return imageContainer;
};

const createImGoingScript = () => {
const script = document.createElement('script');
script.src = "https://imgoingcalendar.com/imgoingscript.js";
return script;
};

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

connectedCallback() {
this.appendChild(createImGoingContainer());
this.appendChild(createImGoingScript());
}
};

customElements.define('wix-default-custom-element', WixDefaultCustomElement);

4. Add a Custom Element to the page, where you want your ITI Digital widget to be located. Select "Choose Source" as shown below, and add your script file with "Velo file." You will select the file that we just updated: "wix-default-custom-element.js"

Save your changes.

5. Next, select "Set Attributes" and set the following fields:

5a.

Attribute Name: id

Value: imgoingcalendar-wrapper-wix

5b.

Attribute Name: route

Value: **This will depend on the widget you are adding. You will use the URL extension provided in delivery. Below is an example.** /BraseltonGA/places/dining-nightlife

5c. 

Attribute Name: url-change

Value: true

6. You're done! You can now copy this element and paste it to other pages of the site, where you will only need to update the Attribute for "route" to a new URL widget extension (example, update /BraseltonGA/places/dining-nightlife to /BraseltonGA/events to update to the events calendar widget). 

7. Below is an example from a Wix website hosted by ITI Digital: Visit Braselton, GA

https://www.visitbraselton.com/food-and-drink