Skip to content
English
  • There are no suggestions because the search field is empty.

Using Walla Widgets in Wix | Walla Support Center

Wix uses a Custom Element setup to embed Walla widgets, and the process involves a few Wix-specific steps that are not immediately intuitive. This article walks through the full installation, from generating your embed code in Walla to publishing the widget live on your Wix site.

Before You Start

You'll need:

  • To be logged in to Walla and have the Wix Custom Element from the Widget and App Settings page within Business Settings.
  • Editor access to your Wix site, with Dev Mode enable
  • The Wix page where you want the widget to appear already created

Step 1: Get Your Widget Embed Code from Walla
  1. In Walla, select the widget you want to install (for example, a Pricing widget).
  2. Choose the Wix Custom Element version of the embed code.
  3. Open the installation instructions. Keep this open, you'll reference it throughout the setup.
Step 2: Add a Custom Element in Wix
  1. In your Wix Editor, go to the page where you want the widget to appear.
  2. Click Add Elements.
  3. Under the Embed Code section, select Custom Element.
  4. Wix will place a blank custom element on your page.
Step 3: Enable Dev Mode and Locate the Public Section
  1. On the left-hand side of the Wix Editor, enable Dev Mode if it isn't already on.
  2. Open the Backend and Public section. This is where Wix stores custom element files, including the JavaScript file you'll create for your Walla widget.
Step 4: Create the Custom Elements Folder (If It Doesn't Exist)

Your embed code file needs to live inside a folder named exactly:

custom-elements

If this folder doesn't already exist under the Public section, add it now. All Walla widget embed code files should be placed inside this folder.

Step 5: Add Your JavaScript File
  1. Back in Walla's instructions, copy the tag name provided. This will also serve as your file name and helps keep your script files organized.
  2. In Wix, click the three-dot menu next to the custom-elements folder and select the option to add a JavaScript file.
  3. Paste in the name and press Enter.

Wix will create the file and display it in the code editor at the bottom of the screen.

Step 6: Replace the Default Code with Your Walla Embed Code

Wix automatically populates new JavaScript files with placeholder code. You don't need this, Walla's embed code includes everything required.

  1. Delete all the default content Wix added to the file.
  2. Go back to Walla and copy the embed code.
  3. Paste the embed code directly into the now-empty file.

No further edits are needed. Your file should now contain only the Walla embed code.

Step 7: Link the File to Your Custom Element
  1. Click on the custom element you placed on your page.
  2. Select Choose Source.
  3. Select File as the source type.
  4. Your newly added JavaScript file should appear automatically in the dropdown.

Note: If your file doesn't appear in this list, double-check that it was added inside the custom-elements folder. Files placed outside this folder won't be selectable here.

  1. Select the file you just added.
Step 8: Set the Tag Name
  1. Return to the Walla installation instructions and copy the tag name for the widget you're installing.
  2. In the Custom Element settings, find the Tag Name field.
  3. Clear any existing text and paste in the tag name from Walla.
  4. Save your changes.

Important: The tag name must match exactly what Walla provides. If it doesn't match, the custom element won't load your widget correctly.

Step 9: Adjust the Element Width

For the best display, set your custom element to stretch to the full width of the page using Wix's Stretch option. Walla's widget content has its own built-in max width, so it won't run edge-to-edge even when the container is stretched. Stretching the container simply allows the widget to expand or shrink naturally based on its content.

Step 10: Save and Publish
  1. Save your changes in Wix.
  2. Publish your site.
  3. Visit the live page to confirm the widget is displaying correctly.
Troubleshooting

If your widget doesn't appear after publishing, check the following:

  • File location: Confirm your JavaScript file is inside the custom-elements folder.
  • File contents: Open the file and verify the code matches the embed code shown in Walla exactly. If you're unsure, copy the embed code again from Walla's instructions and re-paste it.
  • Source selection: Click into your custom element's Choose Source settings and confirm the correct file is selected.
  • Tag name: Confirm the tag name in your Custom Element settings matches the tag name provided by Walla exactly. Even a small mismatch will prevent the widget from loading.

If you've checked all of the above and the widget still isn't displaying, please reach out to Walla Support for further assistance.