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', `https://demo.pdb.graphxserver.io/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({
    authToken: 'YOUR_AUTH_TOKEN', // String: Required for API requests
});
// 2. Open the widget modal (e.g., inside a button click event handler)
Widget.open({
  
  transactionIds: ['transaction-uuid-123'],   // Array of strings: IDs of the transactions  
  onSave: (result) => {
    // Required: Callback function triggered when the user saves the mockups
    console.log('Saved data:', result.data);
  },
  onGenerate: (blob, transactionId) => {
    // Optional: Callback function. Passes the generated blob preview and the transactionId from the response headers.
    console.log('TransactionId:', transactionId);
    // E.g., open image in a new tab:
    const objectURL = URL.createObjectURL(blob);
    window.open(objectURL, '_blank');
  }
});


Init Properties (MockupRequestWidget.init(props))

Property
Type
Required
Description
authToken
string
Yes
Authentication token used for API interactions.

Widget Properties (Widget.open(props))

Below are the properties that the open method accepts:
Property
Type
Required
Description
transactionIds
string[]
Yes
An array of transaction IDs to load mockups for.
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.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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', `https://dev.pdb.graphxserver.io/public/mockup-request-widget/main.js?t=${new Date().toISOString()}`, 'gsx_widget_mockup', undefined, undefined, () => {
          console.log('Widget is loaded');
          document.getElementById('button').addEventListener('click', () => {
            const Widget = MockupRequestWidget.init({authToken: 'TOKEN'});
            Widget.open({
              transactionIds: [
                '958cb4f9-920a-4395-a81f-dd0b1dfd79aa'
              ],
              onSave: (data) => {
                console.log(data);
              },
                onGenerate: (blob, transactionId) => {
                    console.log('Blob size:', blob.size);
                    console.log('Blob type:', blob.type);
                    console.log('TransactionId:', transactionId);

                    const objectURL = URL.createObjectURL(blob);
                    window.open(objectURL, '_blank');
                },
            })
          });
        });
    </script>


</head>
<body>
<button type="button" id="button" >Click</button>

</body>

</html>