How to Integrate Boast with Wix

Wix has a couple extra steps necessary to properly embed the form

Wix is a fairly closed platform and doesn't allow a ton of integrations, but there are several ways you can use Boast and Wix together. You can always use the Boast-hosted landing page to collect feedback from your audience. It makes collecting simple to just link up to the landing page from your Wix site. 

You can also embed the collection form on a Wix site.

A few conditions that Wix requires in order to embed external Javascript:

1. You need an upgraded, paid Wix plan
2. You need your own custom domain (e.g. https://wix.boast.io)

Once you have met these two conditions, you're ready to get started embedding the form on your Wix site.

First, find your Boast embed code:

1. Select Widgets or Forms from your Boast dashboard, depending on which you are looking to embed.
2. Click the Share link on an existing widget or form, or create a new one.
   
3. Copy the Website Embed (recommended) or iFrame Embed code.
   

Here's how you can embed the form on your website:

1. Hop into your Wix account and open your site in the Wix editor
2. Click the "Add" button to add a new element to the page
   
   
   
   
3. Click "Search"
   
   
   
   
4. Search for "Embed" and click the "Embeds" option underneath "Add to Site"
   
   
   
   
5. Click "Custom Element"
   
   
   
   
6. A new Custom Element will be placed on the page
   
   
   
   
7. Click the new Custom Element and select "Choose Source"
   
   
   
   
8. In Element Settings, select "Velo file"
   
   
   
   
9. Enter the Tag Name of "boast-wix-form"
   
   
   
   
   
10. Hit the "Select..." and then "Create New"
    
    
    
    
    
    
11. Paste in the following code into the new file that's been created:

    const FORM_ID = 'YOUR_FORM_ID_HERE';
    const BOAST_COMPONENT = 'boast-form';
    const CLASS_NAME = 'font_8';
    
    const createBoastComponent = () => {
    
    const divContainer = document.createElement('div');
    
    divContainer.setAttribute("data-boast-component", BOAST_COMPONENT);
    
    divContainer.setAttribute("data-form-id", FORM_ID);
    
    return divContainer;
    
    };
    
    const createScript = () => {
    
    const scriptElement = document.createElement('script');
    
    scriptElement.src = "https://widgets.boast.io/current/components.js";
    
    scriptElement.defer = true;
    
    scriptElement.async = true;
    
    return scriptElement;
    
    }
    
    const createContainer = () => {
    
    const divElement = document.createElement('div');
    
    divElement.className = CLASS_NAME;
    
    return divElement;
    
    }
    
    class BoastCustomWixWidget extends HTMLElement {
    
    constructor() {
    
    super();
    
    }
    
    connectedCallback() {
    
    let divContainer = createContainer();
    
    divContainer.appendChild(createScript());
    
    divContainer.appendChild(createBoastComponent());
    
    console.log(divContainer);
    
    this.appendChild(divContainer);
    
    }
    
    }
    
    customElements.define('boast-wix-form', BoastCustomWixWidget);

    
    
    

12. Log into your Boast account and click "Forms" in the top menu
13. Click the "Share" link underneath the form you'd like to embed
14. Under "Embed On Your Website", you'll want to find your form ID in the Javascript code (inside the quotations of the 'data-form-id' attribute.
    
    
    
    
15. Hop back into the script in Wix and paste the form ID into the Javascript code where it says YOUR_FORM_ID_HERE. Your form ID is the "data-form-id" attribute in the Javascript embed script 
16. Publish your site!

Here's a working example of the form embedded on a Wix website: https://wix.boast.io/forms-javascript

Here's an example of what the code should look like once you have added your form ID:

const FORM_ID = 'ebac7f2b-f29c-4cd2-aee3-d97d226b6a27';

const BOAST_COMPONENT = 'boast-form';

const CLASS_NAME = 'font_8';

const createBoastComponent = () => {

const divContainer = document.createElement('div');

divContainer.setAttribute("data-boast-component", BOAST_COMPONENT);

divContainer.setAttribute("data-form-id", FORM_ID);

return divContainer;

};

const createScript = () => {

const scriptElement = document.createElement('script');

scriptElement.src = "https://widgets.boast.io/current/components.js";

scriptElement.defer = true;

scriptElement.async = true;

return scriptElement;

}

const createContainer = () => {

const divElement = document.createElement('div');

divElement.className = CLASS_NAME;

return divElement;

}

class BoastCustomWixWidget extends HTMLElement {

constructor() {

super();

}

connectedCallback() {

let divContainer = createContainer();

divContainer.appendChild(createScript());

divContainer.appendChild(createBoastComponent());

console.log(divContainer);

this.appendChild(divContainer);

}

}

customElements.define('boast-wix-form', BoastCustomWixWidget);