mug-quotebox

Framework-agnostic embed SDK for the MyUtilityGenius QuoteBox energy assistant.

Works with React, Next.js, Vue, Angular, Svelte, Nuxt, plain JS — no UI framework dependency.

Install

npm install mug-quotebox

Usage (any JS framework)

import { loadQuoteBox } from 'mug-quotebox';

loadQuoteBox({
  brand: 'mug',
  origin: 'https://YOUR-QUOTEBOX-HOST'
});

// optional
QuoteBox.open();
QuoteBox.close();

React / Next.js

'use client';
import { useEffect } from 'react';
import { loadQuoteBox } from 'mug-quotebox';

export function QuoteBox() {
  useEffect(() => {
    loadQuoteBox({
      brand: 'mug',
      origin: process.env.NEXT_PUBLIC_QUOTEBOX_ORIGIN!
    });
  }, []);
  return null;
}

Vue

import { onMounted } from 'vue';
import { loadQuoteBox } from 'mug-quotebox';

onMounted(() => {
  loadQuoteBox({ brand: 'mug', origin: 'https://YOUR-QUOTEBOX-HOST' });
});

Script tag (no npm)

<script>
  window.QuoteBoxSettings = { brand: 'mug' };
</script>
<script src="https://YOUR-QUOTEBOX-HOST/quotebox.js" async></script>

Options

| Option | Description | |--------|-------------| | brand | Partner theme id (default mug) | | origin | QuoteBox host origin (required unless using hosted quotebox.js) | | embedUrl | Full embed URL override | | zIndex | iframe z-index |

Requirements

• QuoteBox host must serve /embed?brand=… and allow your site in frame-ancestors (WIDGET_ALLOWED_ORIGIN).