Mockup Designer Widget

Mockup Designer Widget

How to use the Widget

To integrate the Mockup Request Widget into your website, you need to include the widget script, initialize it, and then open it when necessary (e.g., on a button click).

1. Include the Script

Add the following script snippet to your HTML document (in the <head> or right before </body>). Ensure you replace [YOUR_BACKEND_URL] with the appropriate environment URL (e.g., https://demo.pdb.graphxserver.io).
<script>
    (function (i, s, o, g, r, a, m, c) {
        i['MockupRequestWidget'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.addEventListener('load', c);
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', `[YOUR_BACKEND_URL]/public/mockup-request-widget/main.js`, 'gsx_widget_mockup', undefined, undefined, () => {
        console.log('Widget script is loaded and ready');
    });
</script>

2. Initialize and Open

Once the script is loaded, the MockupRequestWidget object becomes available globally on the window object. First, initialize the widget by calling .init(). Then, open the widget by calling .open() with the required properties and callbacks.
// 1. Initialize the widget
const Widget = MockupRequestWidget.init();
// 2. Open the widget modal (e.g., inside a button click event handler)
Widget.open({
  authToken: 'YOUR_AUTH_TOKEN',               // String: Required for API requests
  createCustomView: true,                     // Boolean (Optional): Allows creating custom views
  onSave: (result) => {
    // Required: Callback function triggered when the user saves the mockups
    console.log('Saved data:', result.data);
  },
  onGenerate: (blob) => {
    // Optional: Callback function. Passes the generated blob preview of the current layout.
    // E.g., open image in a new tab:
    const objectURL = URL.createObjectURL(blob);
    window.open(objectURL, '_blank');
  }
});

Widget Properties (Widget.open(props))

Below are the properties that the open method accepts:
Property
Type
Required
Description
authToken
string
Yes
Authentication token used for API interactions.
onSave
(result: { data: SavePayload }) => void
Yes
Callback function executed when the user completes and saves their mockups.
onGenerate
(blob: Blob) => void
No
Callback function executed when the user clicks 'Generate'. The widget processes the current active view layer layout and requests a high-resolution preview from the backend API, returning it as a Blob.
createCustomView
boolean
No
Allows the user to create custom views.

Note on UMD Loading

The widget is packed as a UMD module. When the script executes, it automatically assigns its exports to window.MockupRequestWidget. The inline async script snippet provided above safely bootstraps this process with a load callback.