Konfigurace přehrávače

Konfigurace umožňuje vytvoření dalších variant defaultního projektu. Konfiguraci přehrávači můžete nastavit dvěma způsoby. Prostřednictvím configurationId nebo configurationData.

Nastavení přes configurationId

1. Vytvoření konfigurace

Na url https://templates.stg.webout.io/ vytvořte vlastní konfiguraci do přehrávače. Po uložení konfigurace získáte UUID.

2. Vložte odkaz na náš JS skript

<script src="https://cdn.webout.io/player/webout-player-next.js"></script>

3. Umístětě přehrávač někam do <body> v kódu

Volitelně můžete přehrávači nastavit vars prostřednictvím atributu json. Ty nahradí proměnné v konfiguraci a zobrazí se ve videu.

<body>
...
<webout-player-next
    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": 'Mobilní telefon Apple iPhone 13 128GB Starlight (MLPG3CN/A)',
            "TEXT_PRICE": '16 990 Kč',
            "TEXT_RIGHT": "Do dopravy zdarma zbývá 100 kč",
            "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": "sleva",
            "TEXT_DISCOUNT_NUMBER": "20%",
        }
    }"
>
</webout-player-next>
...
</body>

Nastavení přes configurationData

1. Vložte odkaz na náš JS skript

<script src="https://cdn.webout.io/player/webout-player-next.js"></script>

2. Umístětě přehrávač někam do <body> v kódu

<body>
...
<webout-player-next
    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": 'Mobilní telefon Apple iPhone 13 128GB Starlight (MLPG3CN/A)',
                  },
                },
              },
              {
                "slug": 'cena',
                "source": {
                  "data": {
                    "fontFamily": 'din_2014_bold',
                    "color": '#ffffff',
                    "fontSize": 100,
                    "align": 'center',
                    "text": '16 990kč',
                  },
                },
              },
              {
                "slug": 'doprava',
                "source": {
                  "data": {
                    "fontFamily": 'din_2014_bold',
                    "color": '#ffffff',
                    "fontSize": 100,
                    "align": 'left',
                    "text": 'Do dopravy zdarma zbývá 100 kč',
                  },
                },
              },
              {
                "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": 'sleva',
                  },
                },
              },
            ],
          }
        ]
    }"
>
</webout-player-next>
...
</body>