How to A/B Test External HTML Widgets (e.g., review widgets)

If you try to A/B test a third-party widget by pasting its HTML or script tag directly into the Mida editor, it will break. Mida does not allow raw HTML or <script> tags in the visual editor.

Solution: Convert the widget’s HTML into JavaScript and inject it through the Edit JS panel.
This works for all external widgets.

How to Convert the Widget

Use ChatGPT to turn your widget snippet into safe JS and CSS injection.

Prompt to use in ChatGPT

Convert this HTML widget into JavaScript that:
1. Uses document.createElement to load scripts
2. Injects any HTML nodes with document.createElement + appendChild
3. Injects CSS using either createElement('style') or inline styles

Make sure:
- No backticks or template literals
- No DOMContentLoaded wrapper
- Works when pasted into a JS editor that runs immediately

Paste your widget snippet under the prompt.

Where to paste the code in Mida

Paste the JavaScript output into: Variation → Edit JS

Paste any CSS output into: Variation → Edit CSS

Example

Original (won’t work):

<div id="reviews-widget"></div>
<script src="https://example.com/widget.js"></script>

Converted (works):

var w = document.createElement("script");
w.src = "https://example.com/widget.js";
document.head.appendChild(w);

var container = document.createElement("div");
container.id = "reviews-widget";
document.body.appendChild(container);

Tips

Always load external scripts using document.createElement('script').
Inject HTML nodes using createElement and appendChild.

Inject CSS using:

var style = document.createElement("style");
style.textContent = ".my-widget { color: red; }";
document.head.appendChild(style);

This method allows you to A/B test any third-party widget by converting → pasting → testing.