### Start Gift Draw API Request Source: https://docs.fourthwall.com/platform/webhooks/gifting-guide This API request is used to initiate a gift draw. It requires the host, authentication token, and details about the streaming service, including broadcaster ID and login. The request body specifies the service type and broadcaster information. ```HTTP PUT https://{{host}}/open-api/v1.0/streaming/start Authorization: {{openApiUserAuth}} Content-Type: application/json { "services": [ { "type": "TWITCH", "broadcasterId": "test-broadcaster-id", "broadcasterLogin": "raziosx", "thumbnailUrl": "test-thumbnail-url" } ] } ``` -------------------------------- ### Webhook Event Types Example Source: https://context7_llms This snippet demonstrates the structure of a webhook event JSON payload, which is used to distinguish between different event types. It's crucial for applications to process these events correctly to stay in sync with shop activities. ```JSON { "type": "order.created", "data": { "order_id": "12345", "customer_id": "67890", "total_amount": 50.00, "currency": "USD" }, "created_at": "2023-10-27T10:00:00Z" } ``` -------------------------------- ### Apply Docusaurus Data Attributes from URL Source: https://docs.fourthwall.com/resources/showcase-storefront This script iterates through URL search parameters starting with 'docusaurus-data-' and applies them as data attributes to the document's root element. ```JavaScript function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}() ``` -------------------------------- ### Example Webhook Event JSON Source: https://docs.fourthwall.com/platform/webhooks/webhook-model This JSON object represents a typical webhook event payload, illustrating the structure and fields used by Fourthwall's webhook system. It includes details about the event, shop, order, and associated data. ```JSON { "testMode": false, "id": "weve_geAva6c1RAuyb9HQxbSlmA", "webhookId": "wcon_P-VkRfmJTBaC6_Tst22cew", "shopId": "sh_7ad0c438-beda-4779-a885-0dc325a755c1", "type": "ORDER_PLACED", "apiVersion": "V1_BETA", "createdAt": "2023-07-12T15:05:11.078089+00:00", "data": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "shopId": "sh_c689d374-22ca-43d3-8d29-9ef0805cc4cb", "friendlyId": "D3XZFWPP", "checkoutId": "ch_BV44UYrXQA2T_Xcf1288tw", "promotionId": "prm_a1bc23", "status": "CONFIRMED", "email": "supporter@fourthwall.com", "emailMarketingOptIn": true, "message": "Sample message", "amounts": { "subtotal": { "value": 5.5, "currency": "USD" }, "shipping": { "value": 5.5, "currency": "USD" }, "tax": { "value": 5.5, "currency": "USD" }, "donation": { "value": 5.5, "currency": "USD" }, "discount": { "value": 5.5, "currency": "USD" }, "total": { "value": 5.5, "currency": "USD" } }, "billing": { "address": { "name": "Joe Doe", "address1": "Main Street 1", "address2": "string", "city": "San Francisco", "state": "CA", "country": "US", "zip": "12345", "phone": "123456789" } }, "shipping": { "address": { "name": "Joe Doe", "address1": "Main Street 1", "address2": "string", "city": "San Francisco", "state": "CA", "country": "US", "zip": "12345", "phone": "123456789" } }, "offers": [ { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "name": "My TShirt", "slug": "my-tshirt", "description": "Sample description", "primaryImage": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "url": "https://fourthwall.com/image.png", "width": 800, "height": 600 }, "variant": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "name": "My TShirt", "sku": "WDEK-DRE200L", "unitPrice": { "amount": 5.5, "currency": "USD" }, "quantity": 1, "price": { "amount": 5.5, "currency": "USD" }, "attributes": { "description": "Black, L", "color": { "name": "Black", "swatch": "#000000" }, "size": { "name": "L" } } } } ], "type": "ORDER", "createdAt": "2020-08-13T09:05:36.939Z", "updatedAt": "2020-08-13T09:05:36.939Z" } } ``` -------------------------------- ### Docusaurus Data Attributes Initialization Source: https://docs.fourthwall.com/platform/webhooks/response-retry-policies This script iterates through URL search parameters starting with 'docusaurus-data-' and sets corresponding data attributes on the document's root element. This is used for dynamic content loading or configuration in Docusaurus. ```javascript function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}() ``` -------------------------------- ### Finish Gift Draw API Request Source: https://docs.fourthwall.com/platform/webhooks/gifting-guide This API request is used to conclude a gift draw and declare a winner. It requires the draw ID, authentication token, and the winner's service details, including user ID and username. The response will contain winner details and a redeem URL. ```HTTP PUT https://{{host}}/open-api/v1.0/gifting/draw/{{drawId}}/finish Authorization: {{openApiUserAuth}} Content-Type: application/json { "participants": [ { "service": "TWITCH", "userId": "{{twitchWinnerUserId}}", "userName": "{{twitchWinnerUserName}}" } ] } ``` -------------------------------- ### Set Docusaurus Theme and Data Attributes Source: https://docs.fourthwall.com/resources/community This script dynamically sets the Docusaurus theme based on URL parameters or local storage. It also reads URL parameters starting with 'docusaurus-data-' and applies them as data attributes to the document's root element. ```javascript !function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}() ``` -------------------------------- ### Initialize Data Layer for Google Tag Manager Source: https://docs.fourthwall.com/platform/embedded-sections/signature This JavaScript code initializes the Google Tag Manager data layer, a crucial step for integrating Google Analytics and other tracking services. It ensures that the 'dataLayer' array exists and pushes an event to mark the start of the GTM script execution. ```JavaScript window.dataLayer=window.dataLayer||[]; !function(e,t,a,n){e[n]=e[n]||[];e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer") ``` -------------------------------- ### Docusaurus Theme and Data Attribute Handling Source: https://docs.fourthwall.com/apps/publishing This JavaScript code handles Docusaurus theme settings and custom data attributes. It reads the theme from URL parameters or local storage, applies it to the document's data-theme attribute, and sets other data attributes based on URL query parameters starting with 'docusaurus-data-'. ```JavaScript function t(t){document.documentElement.setAttribute("data-theme",t)} var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()|| function(){try{return window.localStorage.getItem("theme")}catch(t){}}(); t(null!==e?e:"light") !function(){try{const n=new URLSearchParams(window.location.search).entries(); for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){ var a=t.replace("docusaurus-data-","data-"); document.documentElement.setAttribute(a,e)}} catch(t){}}() ``` -------------------------------- ### Use Access Token for API Requests Source: https://docs.fourthwall.com/platform/start-building/authentication-apps Once you have obtained an access token, you can use it to make authenticated requests to the Fourthwall API. This `curl` example shows how to include the access token in the `Authorization` header as a Bearer token to fetch order details. Replace `{YOUR_ORDER_ID}` and `YOUR_ACCESS_TOKEN` with the actual values. ```bash curl -XGET https://api.fourthwall.com/open-api/v1/order/{YOUR_ORDER_ID} \ -H "Authorization: Bearer YOUR_ACCESS_TOKEN" ``` -------------------------------- ### Iframe to Parent Messaging (JavaScript) Source: https://docs.fourthwall.com/platform/embedded-sections/messages This snippet demonstrates how to send messages from an iframe to its parent window. It includes examples for triggering a 'resize' event with a specified height and a 'close' event. These messages allow the embedded content to communicate its state or request actions from the parent application. ```javascript { "type": "resize", "height": 100 } ``` ```javascript { "type": "close" } ``` -------------------------------- ### Signature Verification String Format Source: https://docs.fourthwall.com/platform/embedded-sections/signature This example shows the string format used to generate the HMAC signature for embedded sections. It concatenates the shop ID, supporter ID, tier ID, and timestamp into a single string, which is then signed using HMAC-SHA512. ```Plain Text "shop_id=#{shop_id}&supporter_id=#{supporter_id}&tier_id=#{tier_id}×tamp=#{timestamp}" ``` -------------------------------- ### Set Docusaurus Theme and Data Attributes Source: https://docs.fourthwall.com/platform/embedded-sections/signature This JavaScript code snippet dynamically sets the Docusaurus theme based on URL parameters or local storage, defaulting to 'light'. It also iterates through URL search parameters, applying any that start with 'docusaurus-data-' as data attributes to the document's root element. ```JavaScript !function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}() ``` -------------------------------- ### Initialize Google Tag Manager Source: https://docs.fourthwall.com/resources/showcase-storefront This script initializes Google Tag Manager by pushing a 'gtm.js' event. It ensures the dataLayer is ready and asynchronously loads the GTM script. ```JavaScript window.dataLayer=window.dataLayer||[]; !function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer") ``` -------------------------------- ### Initialize Data Layer for Google Tag Manager Source: https://docs.fourthwall.com/platform/start-building/rate-limiting This script initializes the dataLayer array and asynchronously loads the Google Tag Manager script. It ensures that GTM is properly set up for tracking events and page views. ```javascript window.dataLayer=window.dataLayer||[]; !function(e,t,a,n){e[n]=e[n]||[]; e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer") ``` -------------------------------- ### Initialize Google Tag Manager Source: https://docs.fourthwall.com/resources/community This script initializes Google Tag Manager (GTM) by asynchronously loading the GTM script. It ensures that the dataLayer is available and pushes the 'gtm.js' event upon loading. ```javascript window.dataLayer=window.dataLayer||[]; !function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer") ``` -------------------------------- ### Set Docusaurus Theme from URL or Local Storage Source: https://docs.fourthwall.com/resources/showcase-storefront This script sets the Docusaurus theme based on the 'docusaurus-theme' URL parameter or the 'theme' item in local storage. It defaults to 'light' if no theme is specified. ```JavaScript !function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}() ``` -------------------------------- ### Google Tag Manager Initialization Source: https://docs.fourthwall.com/apps/publishing This JavaScript snippet initializes Google Tag Manager by pushing a 'gtm.js' event. It ensures that the dataLayer is available and asynchronously loads the GTM script. ```JavaScript window.dataLayer=window.dataLayer||[]; !function(e,t,a,n){e[n]=e[n]||[]; e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"}); var g=t.getElementsByTagName(a)[0], m=t.createElement(a); m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB"; g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer"); ``` -------------------------------- ### Docusaurus Theme and Data Initialization Source: https://docs.fourthwall.com/platform/webhooks/testing This script handles the initialization of Docusaurus themes and custom data attributes. It checks for theme parameters in the URL or local storage and applies the theme, and also processes URL parameters to set data attributes on the document element. ```javascript !function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}() ``` -------------------------------- ### Docusaurus Theme Initialization Source: https://docs.fourthwall.com/platform/webhooks/response-retry-policies This JavaScript code snippet initializes the Docusaurus theme based on URL parameters or local storage. It allows users to set a preferred theme or defaults to 'light'. ```javascript !function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}() ``` -------------------------------- ### Google Tag Manager Initialization Source: https://docs.fourthwall.com/platform/webhooks/response-retry-policies This script initializes Google Tag Manager by creating a dataLayer array and asynchronously loading the GTM script. It ensures that tracking events are properly managed. ```javascript window.dataLayer=window.dataLayer||[]; !function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer") ``` -------------------------------- ### Initialize Google Tag Manager Source: https://docs.fourthwall.com/platform/webhooks/limitations This script initializes Google Tag Manager by pushing a 'gtm.js' event to the dataLayer and asynchronously loading the GTM script. It ensures that tracking scripts are loaded correctly. ```javascript window.dataLayer=window.dataLayer||[] !function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer") ``` -------------------------------- ### Google Tag Manager Initialization Source: https://docs.fourthwall.com/platform/webhooks/testing Initializes Google Tag Manager (GTM) by injecting a script tag into the document. This is a standard practice for integrating GTM into a website to enable event tracking and tag management. ```javascript window.dataLayer=window.dataLayer||[]; !function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-W7NGXBJB",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer") ``` -------------------------------- ### Exchange Authorization Code for Access Token Source: https://docs.fourthwall.com/platform/start-building/authentication-apps After a user authorizes your app, they are redirected to your specified URL with an authorization code. This `curl` command demonstrates how to exchange that code for an access token and refresh token by making a POST request to the Fourthwall API. You need to provide your client ID, client secret, redirect URI, and the received authorization code. ```bash curl -XPOST https://api.fourthwall.com/open-api/v1.0/platform/token \ -H "Content-Type: application/x-www-form-urlencoded" \ -d "grant_type=authorization_code&redirect_uri=&client_id=&client_secret=&code=" ``` -------------------------------- ### Authorize URL for OAuth Source: https://docs.fourthwall.com/platform/start-building/authentication-apps This URL is used to initiate the OAuth login process for your app. Users are directed to this link to grant your application access to their shop data. Ensure you replace placeholders with your actual client ID and URL-encoded redirect URI. ```text https://my-shop.fourthwall.com/admin/platform-apps//connect?redirect_uri= ``` -------------------------------- ### Products RSS Feed Source: https://docs.fourthwall.com/storefront/shop-feeds Access public product information via an RSS feed. This feed is available at a standard URL format and does not require API authentication. ```xml ${shop_url}/.well-known/merchant-center/rss.xml ``` -------------------------------- ### Set Docusaurus Theme and Data Attributes Source: https://docs.fourthwall.com/platform/start-building/rate-limiting This script dynamically sets the Docusaurus theme based on URL parameters or local storage. It also applies custom data attributes to the document element, which can be used for styling or theming purposes. ```javascript !function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}() ``` -------------------------------- ### App Section Message Passing Source: https://docs.fourthwall.com/apps/app-sections Demonstrates the message types for App Sections, which differ from embedded sections. These messages are used for communication between the app section and the host environment. ```JavaScript { "type": "RESIZE", "data": { "height": 100 } } ``` ```JavaScript { "type": "CLOSE" } ``` -------------------------------- ### Refresh Access Token using Refresh Token Source: https://docs.fourthwall.com/platform/start-building/authentication-apps Access tokens have a short lifespan. This `curl` command demonstrates how to use a refresh token to obtain a new access token without requiring the user to re-authorize your application. Send a POST request with `grant_type=refresh_token` along with your client ID, client secret, and the refresh token. ```bash curl -XPOST https://api.fourthwall.com/open-api/v1.0/platform/token \ -H "Content-Type: application/x-www-form-urlencoded" \ -d "grant_type=refresh_token&client_id=&client_secret=&refresh_token=" ``` -------------------------------- ### GIFT_DRAW_STARTED Webhook Event Source: https://docs.fourthwall.com/platform/webhooks/webhook-event-types-beta Represents a webhook event triggered when a gift draw begins. It includes details about the giveaway, the offer, amounts, participants, and creation timestamp. ```json { "id": "gdr_EdJvIXu3SEiXe_QkPavHSA", "type": "INITIAL", "giveawayId": "giv_EdJvIXu3SEiXe_QkPavHSA", "giveawayFriendlyId": "D3XZFWPP", "shopId": "sh_c689d374-22ca-43d3-8d29-9ef0805cc4cb", "durationSeconds": 60, "offer": { "id": "063c74ae-7290-4a75-bd8b-e9a1c4afe65c", "name": "My T-shirt", "slug": "my-shirt", "description": "super-tshirt", "primaryImage": { "id": "67e870a5-e002-4e5f-80aa-bb9134fe9a4b", "url": "https://cdn.staging.fourthwall.com/customization/sh_7ad0c438-beda-4779-a885-0dc325a755c1/5a125858-0e0c-4099-996f-db61cbd62f8e.jpeg", "width": 1536, "height": 2048 } }, "amounts": { "subtotal": { "value": 2.00, "currency": "USD" }, "total": { "value": 4.00, "currency": "USD" } }, "email": "test@fourthwall.com", "username": "test-username", "message": "test-message", "gifts": [ { "status": "AVAILABLE", "id": "gft_EdJvIXu3SEiXe_QkPavHSB", "winner": null }, { "status": "AVAILABLE", "id": "gft_EdJvIXu3SEiXe_QkPavHSA", "winner": null } ], "createdAt": "2021-01-01T00:00:00Z" } ``` -------------------------------- ### Product Created Webhook JSON Source: https://docs.fourthwall.com/platform/webhooks/webhook-event-types This JSON model represents the data payload for a 'PRODUCT_CREATED' webhook. It includes details about the newly created product, its variants, images, and creation timestamps. ```JSON { "id": "b2c201d3-8104-4b2a-b2c9-1f6b335b650a", "name": "New T-shirt", "slug": "new-t-shirt", "description": "desc", "state": { "type": "AVAILABLE" }, "images": [ { "id": "67e870a5-e002-4e5f-80aa-bb9134fe9a4b", "url": "https://fourthwall.com/image.png", "width": 1536, "height": 2048 } ], "variants": [ { "id": "e3c12d65-a3aa-417e-a289-dabf71a87194", "name": "New T-shirt - White, S", "sku": "Z3YD-8CTV00S", "unitPrice": { "value": 5.00, "currency": "USD" }, "attributes": { "description": "White, S", "color": { "name": "White", "swatch": "#FFFFFF" }, "size": { "name": "S" } }, "stock": { "type": "LIMITED", "inStock": 5 }, "weight": { "value": 1.00, "unit": "kg" }, "dimensions": { "length": 1.00, "width": 2.00, "height": 3.00, "unit": "cm" }, "images": [ { "id": "67e870a5-e002-4e5f-80aa-bb9134fe9a4b", "url": "https://fourthwall.com/image.png", "width": 1536, "height": 2048 } ] } ], "createdAt": "2021-07-01T12:00:00Z", "updatedAt": "2021-07-01T12:00:00Z" } ``` -------------------------------- ### Handle Gift Purchase Webhook Source: https://docs.fourthwall.com/platform/webhooks/webhook-event-types This JSON model represents a gift purchase webhook event. It includes details about the gift, the supporter, the purchased item, and a list of gifts with their statuses and associated winner information. ```json { "id": "giv_EdJvIXu3SEiXe_QkPavHSA", "friendlyId": "D3XZFWPP", "shopId": "sh_c689d374-22ca-43d3-8d29-9ef0805cc4cb", "offer": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "name": "My TShirt", "slug": "my-shirt", "description": "Sample description", "primaryImage": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "url": "https://fourthwall.com/image.png", "width": 800, "height": 600 } }, "quantity": 1, "amounts": { "subtotal": { "value": 2.00, "currency": "USD" }, "tax": { "value": 3.00, "currency": "USD" }, "total": { "value": 4.00, "currency": "USD" }, "paidBySupporter": { "value": 5.00, "currency": "USD" }, "profit": { "value": 6.00, "currency": "USD" }, "prepaidShipping": { "value": 7.00, "currency": "USD" } }, "email": "supporter@fourthwall.com", "username": "Supporter username", "message": "Sample message", "gifts": [ { "status": "REDEEMED", "id": "gft_EdJvIXu3SEiXe_QkPavHSA", "orderId": "7b83a86f-9221-4416-b739-ef88870f999b", "orderFriendlyId": "F2LGPYCV", "winner": { "email": "winner@fourthwall.com", "username": "winner-1" } }, { "status": "AVAILABLE", "id": "gft_EdJvIXu3SEiXe_QkPavHSB", "winner": { "email": null, "username": "winner-2" } }, { "status": "AVAILABLE", "id": "gft_EdJvIXu3SEiXe_QkPavHSC", "winner": null }, { "status": "CANCELLED", "id": "gft_EdJvIXu3SEiXe_QkPavHSD", "winner": { "email": null, "username": "winner-3" } }, { "status": "CHANGED_TO_PROMOTION", "id": "gft_EdJvIXu3SEiXe_QkPavHSE", "promotionId": "prm_EdJvIXu3SEiXe_QkPavHSA", "winner": { "email": null, "username": "winner-4" } } ], "createdAt": "2020-08-13T09:05:36.939Z" } ``` -------------------------------- ### Set Docusaurus Theme and Data Attributes Source: https://docs.fourthwall.com/platform/webhooks/limitations This script dynamically sets the Docusaurus theme based on URL parameters or local storage. It also applies custom data attributes to the document element, which can be used for theming or other configurations. ```javascript !function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}() ``` -------------------------------- ### Membership Subscription Purchased Webhook JSON Source: https://docs.fourthwall.com/platform/webhooks/webhook-event-types This JSON model represents the data payload for a 'SUBSCRIPTION_PURCHASED' webhook. It is sent when a supporter makes their first subscription purchase or repurchases after a cancellation. ```JSON { "id": "251430", "email": "supporter@fourthwall.com", "nickname": "username", "subscription": { "type": "ACTIVE", "variant": { "id": "mtv_3331", "interval": "MONTHLY", "amount": { "value": 5.00, "currency": "USD" } } } } ``` -------------------------------- ### Collections JSON Feed Source: https://docs.fourthwall.com/storefront/shop-feeds Retrieve product information for a specific collection in JSON format. The feed includes a 'slug' to identify the collection and supports pagination for large datasets. ```json ${shop_url}/collections/{slug}.json ``` ```json ${shop_url}/collections/{slug}/{page_number}.json ``` -------------------------------- ### Process Order Data Source: https://docs.fourthwall.com/platform/webhooks/webhook-event-types This JSON model represents a processed order, including details about the order itself, customer information, billing and shipping addresses, and the items included in the order. It also contains information about promotions and the order's status. ```json { "order": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "shopId": "sh_c689d374-22ca-43d3-8d29-9ef0805cc4cb", "friendlyId": "D3XZFWPP", "checkoutId": "ch_BV44UYrXQA2T_Xcf1288tw", "promotionId": "prm_a1bc23", "status": "SHIPPED", "email": "supporter@fourthwall.com", "emailMarketingOptIn": false, "username": "Supporter username", "message": "Sample message", "amounts": { "subtotal": { "value": 5.5, "currency": "USD" }, "shipping": { "value": 5.5, "currency": "USD" }, "tax": { "value": 5.5, "currency": "USD" }, "donation": { "value": 5.5, "currency": "USD" }, "discount": { "value": 5.5, "currency": "USD" }, "total": { "value": 5.5, "currency": "USD" } }, "billing": { "address": { "name": "Joe Doe", "address1": "Main Street 1", "address2": "string", "city": "San Francisco", "state": "CA", "country": "US", "zip": "12345", "phone": "123456789" } }, "shipping": { "address": { "name": "Joe Doe", "address1": "Main Street 1", "address2": "string", "city": "San Francisco", "state": "CA", "country": "US", "zip": "12345", "phone": "123456789" } }, "offers": [ { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "name": "My TShirt", "slug": "my-tshirt", "description": "Sample description", "primaryImage": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "url": "https://fourthwall.com/image.png", "width": 800, "height": 600 }, "variant": { "id": "00aa4abd-5778-4199-8161-0b49b2f212e5", "name": "My TShirt", "sku": "WDEK-DRE200L", "unitPrice": { "amount": 5.5, "currency": "USD" }, "quantity": 1, "price": { "amount": 5.5, "currency": "USD" }, "attributes": { "description": "Black, L", "color": { "name": "Black", "swatch": "#000000" }, "size": { "name": "L" } } } } ], "source": { "type": "ORDER" }, "createdAt": "2020-08-13T09:05:36.939Z", "updatedAt": "2020-08-13T09:05:36.939Z" }, "update": { "type": "STATUS" } } ```