Home Blog

WOWidget share url scheme

WOWidget share feature allows users to export/import pre-configured widgets.

Technical details

The share url consists of https://www.wowidget.com/share and base64 encoded parameters.
Base64 is used to hide (not encrypt) your shared URL.
iOS makes the URL invalid (cuts out part of the URL) if any of the URL part is longer than 301 characters. Therefore base64 data are split by a hyphen character into 301 long chunks.

Parameters

The order of the parameters does not matter. Parameters are joined with a vertical bar character and string values are percent-encoded as "value".addingPercentEncoding(withAllowedCharacters: .alphanumerics). JavaScript encodeURIComponent can also be used.

u
Valid url. Percent-encoded string.
n
Name, title. Percent-encoded string.
t
Type of content. Number (see below).
s
Slot. Number between 1 and 5 included.
c
Optional config. Percent-encoded json string. (see below).

Type

1
html
2
json
3
xml
4
image

Config

Config is represented as a JSON object. Config is optional and depends on the type. The order of the values in config does not matter.

HTML config

origin
Scroll to coordinates [x, y] as floats.
height
Widget height as float (see screen dimensions).
zoom
Zoom level. Float between 1 and 10 included.
javascript
Bool. Indicating if JavaScript is enabled.
allowInteraction
Bool. Indicating if user interaction (clicking on links) is enabled.
background
Background color. 4 hexadecimal numbers representing red, green, blue, alpha:
EF (Red) D5 (Green) 00 (Blue) FF (Alpha) = EFD500FF (Yellow)

HTML config example

        {
            "zoom": 1.11,
            "allowInteraction": false,
            "javascript": true,
            "height": 238.5,
            "origin": [0, 333.33333333333333],
            "background": "EFD500FF"
        }
    

Image config

Same as HTML config.

JSON config

fields
Array of Fields

Field

label
String. If empty, than the last string item of the path will be used.
path
Array. Consists of strings (key names) and numbers (array indexes). If empty, than the first value found in object (JSON or XML) will be used.
background
Background color (see HTML config background)

JSON config example

        {
            "fields": [
                {
                    "label": "Name of field",
                    "path": ["Path", "to", 1, "field"],
                    "background": "EFD500FF"
                },
                {
                    "label": "",
                    "path": [],
                    "background": "00000000"
                },
                {
                    "label": "Emoji",
                    "path": ["Emoji"],
                    "background": "F0F0F0F0"
                }
            ]
        }
    

XML config

Same as JSON config.

Share url example

  1. Input:
    • u = https://www.wowidget.com
    • n = WOWidget 😀
    • t = html
    • s = 1
    • c = {"allowInteraction":false,"background":"EFD500FF","height":300,"javascript":true,"origin":[0,0],"zoom":1}
      • allowInteraction = false
      • background = EFD500FF
      • height = 300
      • javascript = true
      • origin = [0, 0]
      • zoom = 1
  2. Percent-encoding:
    • u = https%3A%2F%2Fwww%2Ewowidget%2Ecom
    • n = WOWidget%20%F0%9F%98%80
    • t = 1
    • s = 1
    • c = %7B%22allowInteraction%22%3Afalse%2C%22background%22%3A%22EFD500FF%22%2C%22height%22%3A300%2C%22javascript%22%3Atrue%2C%22origin%22%3A%5B0%2C0%5D%2C%22zoom%22%3A1%7D
  3. Concatenation:
    u=https%3A%2F%2Fwww%2Ewowidget%2Ecom|n=WOWidget%20%F0%9F%98%80|t=1|s=1|c=%7B%22allowInteraction%22%3Afalse%2C%22background%22%3A%22EFD500FF%22%2C%22height%22%3A300%2C%22javascript%22%3Atrue%2C%22origin%22%3A%5B0%2C0%5D%2C%22zoom%22%3A1%7D
  4. Base64 encoding:
    dT1odHRwcyUzQSUyRiUyRnd3dyUyRXdvd2lkZ2V0JTJFY29tfG49V09XaWRnZXQlMjAlRjAlOUYlOTglODB8dD0xfHM9MXxjPSU3QiUyMmFsbG93SW50ZXJhY3Rpb24lMjIlM0FmYWxzZSUyQyUyMmJhY2tncm91bmQlMjIlM0ElMjJFRkQ1MDBGRiUyMiUyQyUyMmhlaWdodCUyMiUzQTMwMCUyQyUyMmphdmFzY3JpcHQlMjIlM0F0cnVlJTJDJTIyb3JpZ2luJTIyJTNBJTVCMCUyQzAlNUQlMkMlMjJ6b29tJTIyJTNBMSU3RA==
  5. Split data into 301 long chunks separated by a hyphen.
    dT1odHRwcyUzQSUyRiUyRnd3dyUyRXdvd2lkZ2V0JTJFY29tfG49V09XaWRnZXQlMjAlRjAlOUYlOTglODB8dD0xfHM9MXxjPSU3QiUyMmFsbG93SW50ZXJhY3Rpb24lMjIlM0FmYWxzZSUyQyUyMmJhY2tncm91bmQlMjIlM0ElMjJFRkQ1MDBGRiUyMiUyQyUyMmhlaWdodCUyMiUzQTMwMCUyQyUyMmphdmFzY3JpcHQlMjIlM0F0cnVlJTJDJTIyb3JpZ2luJTIyJTNBJTVCMCUyQzAlNUQlMkMlMjJ6-b29tJTIyJTNBMSU3RA==
  6. Final share url:
    https://www.wowidget.com/share?dT1odHRwcyUzQSUyRiUyRnd3dyUyRXdvd2lkZ2V0JTJFY29tfG49V09XaWRnZXQlMjAlRjAlOUYlOTglODB8dD0xfHM9MXxjPSU3QiUyMmFsbG93SW50ZXJhY3Rpb24lMjIlM0FmYWxzZSUyQyUyMmJhY2tncm91bmQlMjIlM0ElMjJFRkQ1MDBGRiUyMiUyQyUyMmhlaWdodCUyMiUzQTMwMCUyQyUyMmphdmFzY3JpcHQlMjIlM0F0cnVlJTJDJTIyb3JpZ2luJTIyJTNBJTVCMCUyQzAlNUQlMkMlMjJ6-b29tJTIyJTNBMSU3RA==

Tools

Download WOWidget from App Store