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

      MGID Widget Code - Direct Installation

      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. Direct

      Direct placement of the MGID widget code (Simple JS)

      SimpleJS prioritizes fast website loading. Here's why:

      • No external dependencies: Integrate SimpleJS directly into your code, eliminating the need for plugins and extra loader blocks that can slow things down.
      • Asynchronous loading: SimpleJS loads in parallel with the rest of your website, ensuring it doesn't become a bottleneck for initial page load speed.

      Follow these steps to implement the codes directly:

      1. Open your HTML editor app of choice. The process is the same for any editor (for this guide, we’ll use an online editor with a compiled site preview).
      2. Locate the <head> section and paste the <head> code part anywhere inside the <head> section. The best practice would be placing it somewhere at the top so it starts loading faster and so it’s easier to locate, just in case.

      For efficiency, you only need to use this code part in one location.

      2. Direct

      3. For each widget you want to display, copy and paste its corresponding <body> code part snippet into the designated area of your page where you want the widget to appear.

      The screenshot below shows two widgets placed: The smart widget and the Impact In-article widget. The best practice is to place the widgets into their “destined” blocks, such as inside the article or the content.

      3. Direct

      Save the changes and test if everything is placed correctly. Adjust if needed. The widget will appear in the setup spots.

      There are other units you can place utilizing the same method, changing only the placements and <body> code parts. No <head> code change is needed if it’s already on the page.

      Video Guide

      Click the thumbnail below to access the video guide: