WingifyGuides

Create a custom widget

{
    "name": "Pop-up",
    "description": "Sample pop-up",
    "type": "custom",
    "isGlobal": true,
    "code": {
        "html": "<div> <div class=\"Click-here\">Click Here</div> <div class=\"custom-model-main\"> <div class=\"custom-model-inner\"> <div class=\"close-btn\">×</div> <div class=\"custom-model-wrap\"> <div class=\"pop-up-content-wrap\"> Content Here </div> </div> </div> <div class=\"bg-overlay\"></div> </div> </div>",
        "js": {
            "data": "document.querySelector(\".Click-here\").addEventListener('click', function () { document.querySelector(\".custom-model-main\").classList.add('model-open'); });  document.querySelector(\".close-btn, .bg-overlay\").addEventListener('click',function () { document.querySelector(\".custom-model-main\").classList.remove('model-open'); }); "
        },
        "css": "body {display: block;}"
    }
}

📘 Note:

The following fields are mandatory for creation of widget

  • html
  • name
  • type with a fixed value of 'custom'
  • isGlobal: true/false (boolean) is used to make the widget global, any modification done in the global widget, will reflect in all the running campaigns using the widget reference

Global widget has size limit of 500Kb

#OpenAPI definition

{
  "openapi": "3.1.0",
  "info": {
    "title": "api",
    "version": "4"
  },
  "servers": [
    {
      "url": "https://app.wingify.com/api/v2"
    }
  ],
  "components": {
    "securitySchemes": {
      "sec0": {
        "type": "apiKey",
        "in": "header",
        "name": "token"
      }
    }
  },
  "security": [
    {
      "sec0": []
    }
  ],
  "paths": {
    "/accounts/{account_id}/changesets": {
      "post": {
        "summary": "Create a custom widget",
        "description": "",
        "operationId": "create-a-custom-widget",
        "parameters": [
          {
            "name": "account_id",
            "in": "path",
            "description": "Use 'current' keyword to refer to the Main Workspace or the Integer Workspace Id",
            "schema": {
              "type": "string",
              "default": "current"
            },
            "required": true
          }
        ],
        "responses": {
          "200": {
            "description": "200",
            "content": {
              "application/json": {
                "examples": {
                  "Result": {
                    "value": "{}"
                  }
                },
                "schema": {
                  "type": "object",
                  "properties": {}
                }
              }
            }
          },
          "400": {
            "description": "400",
            "content": {
              "application/json": {
                "examples": {
                  "Result": {
                    "value": "{}"
                  }
                },
                "schema": {
                  "type": "object",
                  "properties": {}
                }
              }
            }
          }
        },
        "deprecated": false
      }
    }
  },
  "x-readme": {
    "headers": [],
    "explorer-enabled": true,
    "proxy-enabled": true
  },
  "x-readme-fauxas": true
}