Webhook Guide

Template Widgets created in Bluepic STUDIO can send webhooks in addition to or instead of the download button.

Payload

The payload of the webhook in the example above looks like this:

{
  "templateId": "680655dbf2e5b40a379a63af",

  "data": {
    "image3_image": {
      "src": "https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/a2aec48a-c9c0-4ad4-53e7-a377e709a300/public",
      "scale": 1,
      "innerPos": [
        0,
        0
      ],
      "innerRotate": 0
    },
    "text1_text": "Speaker @ SPICEfair",
    "mask1_vShow": true
  },

  "files": [
    "https://pub-5d185a253ac1441d9c9498433a022755.r2.dev/render-680655dbf2e5b40a379a63af-6f38abd70b095a1b.png"
  ],

  "creditsConsumed": 1,
  "sessionId": "MCom5FsGXZ58TAKbwcG4H",
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36",
  "visitorId": "a92600661e94c2801cb09fec196bd647",
  "visitorConfidence": 0.5
}

The content of the input fields is written in the data object, and a link to the output file(s) is in the files array. You can use the session ID to match sessions in your front and backend. The visitor ID is based on digital fingerprinting and can help you identify users across sessions; however, this does not work with 100% reliability.

CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers that controls how resources or data can be shared between different origins (domains). In the context of webhooks, it determines whether a browser will allow your server to receive and respond to requests coming from a different origin than your own.

Why It Matters for Webhooks

Webhook requests sent from Bluepic STUDIO templates will always originate from https://template.bluepic.io . If your backend server is set up to receive these webhook calls, it needs to explicitly allow requests from this origin. Otherwise, the browser may block the connection due to CORS restrictions.

Setting Up a CORS Whitelist

To make sure your webhook endpoint works correctly with Bluepic STUDIO, you’ll need to configure your server to accept requests from https://template.bluepic.io . This is done by adding that domain to your CORS whitelist — a list of origins your server allows to make requests.

This ensures the webhook payload is successfully received and processed. Be sure your server is configured to respond with the proper CORS headers when it receives a request from that origin.