Integrate Mighty in Wix.com
You can embed a Mighty Widget into your wix website in 2 simple steps. It takes about ~5 minutes for an entire setup. Step 1: Install a script Copy this tags into "head" section in Settings / Custom Code:
<script src="https://unpkg.com/mighty-academy-widget@latest/dist/mightyIframeIntegration.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
mightyIframeIntegration.authorizePackage('dark');
});
</script>Video: https://www.youtube.com/watch?v=NypdehiSXIU&t=35s ---
Setting Up a Modal to Display a Mighty Widget in Wix
On of the best ways to ensure optimal experience for all visitors on your wix.com site with mighty iFrame is to setup a lighthouse modal. This modal will look just like a normal page for the end user. Unfortunately, the infrastructure of Wix is a it dated and doesnt allow for some specific features like adaptive heights for embeds - so this is a workaroud way to install the mighty-page widget in the most user-friendly way.
Follow these steps to create and configure a modal in Wix to display the Mighty widget using an embedded iframe:
---
Step 1: Add a Lightbox
1. Open your Wix editor.
2. From the left-hand menu, select Add Elements > Interactive > Promotion.
3. Choose the first preset on the list (a Lightbox template). It will be added to your page.
---
Step 2: Clean Up the Lightbox
1. Remove all unnecessary elements from the Lightbox, such as default text, images, or buttons.
2. Customize the background colors:
- For the outer background (outside the blue border), choose a color that matches your page style.
- For the inner container (inside the blue border), set a background color that complements your content.
---
Step 3: Align the Lightbox to the Center
1. Select the inner container within the Lightbox.
2. Ensure it is centered on the page for a clean and balanced look.
3. Click the Settings (gear icon) that appears near the container.
4. In the settings menu, choose the specific pages where you want this Lightbox (modal) to appear.
---
Step 4: Add an HTML Embed
1. From the left-hand menu, select Add Elements > Embed Code > Popular Embeds > Embed HTML.
2. Paste the iframe code provided in the Mighty widget documentation into the embed field.
3. Click Apply to save the changes.
---
Step 5: Position and Resize the Embed
1. Adjust the dimensions and positioning of the container and HTML embed to fit the design:
- Container dimensions and position:
- Width (W): 1024
- Height (H): 928
- X position: -22
- Y position: 66
- HTML embed dimensions and position:
- Width (W): 1024
- Height (H): 928
- X position: -22
- Y position: 66
2. Ensure the embed is correctly positioned within the container and looks consistent with your page design.
---
With these steps completed, your Lightbox will be set up to display the Mighty widget seamlessly on your Wix website.
Here’s the mobile-specific instruction for setting up the modal:
---
Setting Up a Modal for Mobile View in Wix
To ensure your modal displays properly on mobile devices, follow these steps after completing the setup for desktop view:
---
Step 1: Switch to Mobile View
1. In the Wix editor, locate the View Toggle at the top-left corner of the screen.
2. Click the Switch to Mobile icon to switch to the mobile layout.
---
Step 2: Adjust the Modal for Mobile
1. Select the Lightbox (modal) container. If there is currently no container on the layout, from the left-hand menu, select Menus and Pages > Lightboxes > choose your Lightbox and drag-and-drop it onto the canvas.
2. Update its dimensions and position for mobile compatibility:
- Container dimensions and position:
- Width (W): 319
- Height (H): 797
- X position: 0
- Y position: 0
3. Select the HTML embed within the container.
4. Update the embed’s dimensions and position to match the container:
- HTML embed dimensions and position:
- Width (W): 319
- Height (H): 797
- X position: 0
- Y position: 0
Once these adjustments are made, your modal will be optimized for mobile viewing, ensuring a seamless user experience across devices.
Last updated