Types of integration
      Back to home
      1. Help Center Home
      2. Publishers
      3. Types of integration

      MGID Widget Code Installation on Wix.com

      Introduction

      MGID widget code (Simple JS) is a website-level MGID installation code that publishers use to integrate widgets on a website. Unlike standard installation code, the Simple JS tag is designed to be lightweight and efficient. It ensures minimal impact on site performance and avoids extra steps from the publisher's end.

      The widget installation code contains two pieces:

      1. Head Script: This is the MGID preloader that should be placed inside the website <HEAD> section. 
      2. Body Container: This is the div element where the MGID widget should be rendered inside a blog post.

      You need to create the desired ad units (widgets) in the dashboard and get the widget codes.

      1. Wix

      How to integrate MGID widget code (Simple JS) on Wix.com

      There are two reliable options for widget installation, but they have some limitations. Due to the engine's limitations, any ad we can place on Wix websites will be displayed in an iframe. This means the dashboard has limited stats and no infinite scroll functionality for the first option.

      Option 1 - Adding a Section with Custom Code

      The first option involves creating a new section in the “edit site” section for the page type you choose. This technique can be applied to any page type that allows you to add sections or blocks. We'll use blog posts as an example.

      While SimpleJS uses code in the <head> and <body>, Wix requires a different approach. We'll explore how to achieve the same result with Wix.

      Follow these steps:

      1. Navigate to your Wix website’s dashboard, select Sites, and click the Edit Site button.

      2. Wix

      2. Select the page type on which you wish to place ads. The actions may differ slightly depending on your website type and theme of choice, but the method is the same. In our case, we will select Post as we have the Blog website type.

      3. Wix

      3. Let’s place an under-article. Scroll down to the end of the article, to the recent posts and comments block, and click Add Section.

      4. Wix

      4. You can select any type of section here; in our case, we’ll choose to add a Blank one.

      5. Wix

      5. Place the ad unit Into the section:

      • Click on the section once, then click the (+) button at the top left to add an Embed HTML Element to the newly created section.

      6. Wix

      7. Wix

      • Copy Head and Body code parts from your MGID dashboard into a text file or any notes app.

      8. Wix_GIF

      • Paste all the code into the code text box and hit “update”

      9. Wix

      • Resize the block and the section so the ad unit fits well.

      10. Wix

      Now, let's make sure the unit is visible in any theme.

      6. Add a bright background to the section or white background to our ad unit instead.

      • Adding bright color to the background of a section: Click on the section, select Change Background, and pick white color.

      11. Wix_GIF

      • Adding white color to the ad unit background into the widget code: Edit the HTML code and add the following script: 
      style="background-color:white;" right after <div and hit “update

      12. Wix_GIF

      This installation option has its limitations and is by no means ideal. For example, you cannot place anything inside content or any block. 

      Let’s see if the second option would be a better choice. Please note that you can use both at the same time.

      Option 2 -  Custom Code Inside the Content

      We can embed an HTML frame inside content anywhere on the page, but this must be done manually for each new article or post. 

      Follow these steps:

      1. Navigate to your Wix website’s dashboard and select editing any of your posts or articles.
      13. Wix_GIF

      2. Click on any part of the content where you want to place an ad unit. Click a |+| that appears to the left of the content and select HTML code.

      14. Wix_GIF

      3. Click Edit HTML, copy and paste both parts of the ad unit code into the opened text box, and resize the box to your preference. Remember that our ad units are responsive and can change according to the frame size.

      15. Wix_GIF

      4. Now add the following line of code right after the <div part.

       <div style="background-color:white;"

      This ensures that the background of the ad unit remains white and all text elements are visible.

      16. Wix