Our APIs

Iframe Usage & Customization

Is this step you learn how to insert the embed panel's iframe.

🚧

To avoid experience issues, the iframe's min-width must me 764px

Example of final application using the access token:

<iframe
	src="https://admin.scaleup.com.br/embed/smart-player/auth/[accessToken]"
	style="min-width: 764px; width: 100%; height: 100%; min-height: 60vh;	border: 0;"
	allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
</iframe>

Custom Theme/CSS

If you desire to customize your iframe colors and fonts you'll have to add the loadCustomCSS Query Parameter just like the following example:

Usage:

<iframe
	src="https://admin.scaleup.com.br/embed/smart-player/auth/[accessToken]?loadCustomCSS=https://smartplayer.scaleup.com.br/myCustomTheme.css"
	style="min-width: 764px; width: 100%; height: 100%; min-height: 60vh;	border: 0;"
	allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
</iframe>

@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap);

* {
  --color-default--16: #ffffff;
  --color-default--15: #fafafa;
  --color-default--14: #f5f5f5;
  --color-default--13: #f0f0f0;
  --color-default--12: #d9d9d9;
  --color-default--11: #bfbfbf;
  --color-default--10: #a6a6a6;
  --color-default--9: #8c8c8c;
  --color-default--8: #595959;
  --color-default--7: #434343;
  --color-default--6: #424242;
  --color-default--5: #404040;
  --color-default--4: #262626;
  --color-default--3: #1f1f1f;
  --color-default--2: #141414;
  --color-default--1: #000000;

  --color-blue--10: #f0f9ff;
  --color-blue--9: #e0f3ff;
  --color-blue--8: #b8e0ff;
  --color-blue--7: #8fcbff;
  --color-blue--6: #66b3ff;
  --color-blue--5: #3e97ff;
  --color-blue--4: #2975d9;
  --color-blue--3: #1956b3;
  --color-blue--2: #0d3b8c;
  --color-blue--1: #082766;

  --color-green--10: #e8f5e9;
  --color-green--9: #c8e6c9;
  --color-green--8: #a5d6a7;
  --color-green--7: #81c784;
  --color-green--6: #66bb6a;
  --color-green--5: #4caf50;
  --color-green--4: #43a047;
  --color-green--3: #2e7d32;
  --color-green--2: #1b5e20;
  --color-green--1: #061709;

  --color-yellow--10: #fffee6;
  --color-yellow--9: #fff7a3;
  --color-yellow--8: #fff07a;
  --color-yellow--7: #ffe552;
  --color-yellow--6: #ffd829;
  --color-yellow--5: #f6c000;
  --color-yellow--4: #cf9b00;
  --color-yellow--3: #a87900;
  --color-yellow--2: #825900;
  --color-yellow--1: #5c3c00;

  --color-red--10: #fff1f0;
  --color-red--9: #ffccc7;
  --color-red--8: #ffa39e;
  --color-red--7: #ff7875;
  --color-red--6: #ff4d4f;
  --color-red--5: #f5222d;
  --color-red--4: #cf1322;
  --color-red--3: #a8071a;
  --color-red--2: #820014;
  --color-red--1: #5c0011;

  --color-purple--10: #f9f0ff;
  --color-purple--9: #efdbff;
  --color-purple--8: #d3adf7;
  --color-purple--7: #b37feb;
  --color-purple--6: #9254de;
  --color-purple--5: #722ed1;
  --color-purple--4: #531dab;
  --color-purple--3: #391085;
  --color-purple--2: #22075e;
  --color-purple--1: #120338;

  --background-color---embed: #000;

  --font-family: 'Space Grotesk';
  --font-style: normal;

  --font-weight--regular: 400;
  --font-weight--medium: 500;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;

  --font-size--p1: 16px;
  --font-size--p2: 14px;
  --font-size--p3: 12px;
  --font-size--p4: 10px;
  --font-size--p5: 8px;

  --letter-spacing--p1: -0.32px;
  --letter-spacing--p2: -0.28px;
  --letter-spacing--p3: -0.24px;
  --letter-spacing--p4: -0.2px;
  --letter-spacing--p5: -0.16px;

  --line-height--fixed__p1: 20px;
  --line-height--fixed__p2: 16px;
  --line-height--fixed__p3: 14px;
  --line-height--fixed__p4: 12px;
  --line-height--fixed__p5: 12px;

  --line-height--100: 100%;
  --line-height--140: 140%;

  --font-size--d1: 60px;
  --font-size--d2: 50px;
  --font-size--h1: 40px;
  --font-size--h2: 32px;
  --font-size--h3: 24px;
  --font-size--h4: 22px;
  --font-size--h5: 20px;
  --font-size--h6: 18px;

  --letter-spacing--d1: -2.4px;
  --letter-spacing--d2: -2px;
  --letter-spacing--h1: -0.8px;
  --letter-spacing--h2: -0.64px;
  --letter-spacing--h3: -0.48px;
  --letter-spacing--h4: -0.44px;
  --letter-spacing--h5: -0.4px;
  --letter-spacing--h6: -0.36px;

  --line-height--fixed__d1: 68px;
  --line-height--fixed__d2: 56px;
  --line-height--fixed__h1: 48px;
  --line-height--fixed__h2: 36px;
  --line-height--fixed__h3: 28px;
  --line-height--fixed__h4: 24px;
  --line-height--fixed__h5: 24px;
  --line-height--fixed__h6: 20px;
}

* {
  --color-grey--1__light: var(--color-default--3);
  --color-grey--2__light: var(--color-default--4);
  --color-grey--3__light: var(--color-default--5);
  --color-grey--4__light: var(--color-default--6);
  --color-grey--5__light: var(--color-default--9);
  --color-grey--6__light: var(--color-default--14);

  --color-grey--1__dark: var(--color-default--16);
  --color-grey--2__dark: var(--color-default--14);
  --color-grey--3__dark: var(--color-default--11);
  --color-grey--4__dark: var(--color-default--12);
  --color-grey--5__dark: var(--color-default--7);
  --color-grey--6__dark: var(--color-default--5);
}

Result:

Left: Default color variables || Right: Custom css via **Query Parameter**.

Left: Default color variables || Right: Custom css via Query Parameter.