Player Configuration

Configuration allows you to create additional variants of the default project. You can configure the player in two ways: via configurationId or configurationData.

Configuration via configurationId

1. Create a Configuration

Go to https://templates.stg.webout.io/ and create a custom configuration for the player. After saving the configuration, you will receive a UUID.

2. Add a Link to Our JS Script

<script src="https://volcano.webout.me/global/player/webout-player.js"></script>

3. Place the Player Somewhere in the <body> of the Code

Optionally, you can set vars for the player using the json attribute. These will replace variables in the configuration and be displayed in the video.

<body>
...
<webout-player
    projectSlug="sablona"
    configurationId="UUID"
    initialize="true"
    json="{
        "args": {
        },
        "vars": {
            "IMAGE_BACKGROUND":"https://phoenix.dev.webout.io/uploads/templates/images/bg_datart.png",
            "IMAGE_PRODUCT": "https://phoenix.dev.webout.io/uploads/templates/images/product_datart.png",
            "IMAGE_BAR": "https://phoenix.dev.webout.io/uploads/templates/images/bar_datart.png",
            "TEXT_NAME": 'Mobile Phone Apple iPhone 13 128GB Starlight (MLPG3CN/A)',
            "TEXT_PRICE": '16 990 CZK',
            "TEXT_RIGHT": "100 CZK left for free shipping",
            "IMAGE_LOGO": "https://phoenix.dev.webout.io/uploads/templates/images/logo_datart.png",
            "IMAGE_DISCOUNT":"https://phoenix.dev.webout.io/uploads/templates/images/discount_datart.png",
            "TEXT_DISCOUNT": "discount",
            "TEXT_DISCOUNT_NUMBER": "20%",
        }
    }"
>
</webout-player>
...
</body>

Configuration via configurationData

1. Add a Link to Our JS Script

<script src="https://volcano.webout.me/global/player/webout-player.js"></script>

2. Place the Player Somewhere in the <body> of the Code

<body>
...
<webout-player
    projectSlug="sablona"
    initialize="true"
    configurationData="{
        "slug": "sablona",
        "scenes": [
          {
            "slug": 'PACKSHOT',
            "content": [
              {
                "slug": 'background',
                "source": {
                  "data": {
                    "src": "https://phoenix.dev.webout.io/uploads/templates/images/bg_datart.png",
                  },
                },
              },
              {
                "slug": 'pruh',
                "source": {
                  "data": {
                    "src": "https://phoenix.dev.webout.io/uploads/templates/images/bar_datart.png",
                  },
                },
              },
              {
                "slug": 'produkt',
                "source": {
                  "data": {
                    "src": "https://phoenix.dev.webout.io/uploads/templates/images/product_datart.png",
                  },
                },
              },
              {
                "slug": 'název',
                "source": {
                  "data": {
                    "fontFamily": 'din_2014_bold',
                    "color": '#ffffff',
                    "fontSize": 100,
                    "align": 'left',
                    "text": 'Mobile Phone Apple iPhone 13 128GB Starlight (MLPG3CN/A)',
                  },
                },
              },
              {
                "slug": 'cena',
                "source": {
                  "data": {
                    "fontFamily": 'din_2014_bold',
                    "color": '#ffffff',
                    "fontSize": 100,
                    "align": 'center',
                    "text": '16 990 CZK',
                  },
                },
              },
              {
                "slug": 'doprava',
                "source": {
                  "data": {
                    "fontFamily": 'din_2014_bold',
                    "color": '#ffffff',
                    "fontSize": 100,
                    "align": 'left',
                    "text": '100 CZK left for free shipping',
                  },
                },
              },
              {
                "slug": 'logo',
                "source": {
                  "data": {
                    "src": "https://phoenix.dev.webout.io/uploads/templates/images/logo_datart.png",
                  },
                },
              },
              {
                "slug": 'sleva-grafika',
                "source": {
                  "data": {
                    "src": "https://phoenix.dev.webout.io/uploads/templates/images/discount_datart.png",
                  },
                },
              },
              {
                "slug": 'sleva-cislo',
                "source": {
                  "data": {
                    "fontFamily": 'din_2014_bold',
                    "color": '#000',
                    "fontSize": 100,
                    "align": 'center',
                    "text": '50%',
                  },
                },
              },
              {
                "slug": 'sleva-text',
                "source": {
                  "data": {
                    "fontFamily": 'din_2014_bold',
                    "color": '#000',
                    "fontSize": 100,
                    "align": 'center',
                    "text": 'discount',
                  },
                },
              },
            ],
          }
        ]
    }"
>
</webout-player>
...
</body>