HTML에 대시보드 임베드하기
대시보드는 자체 웹사이트나 로컬 HTML 페이지에도 손쉽게 임베드할 수 있습니다. 이는 표준 HTML iframe 요소를 사용해 수행됩니다. 대시보드가 정상적으로 로드되려면 클라우드 또는 온프레미스에서 공유되어 있어야 합니다. 온프레미스 대시보드는 액세스하는 클라이언트가 동일한 사내 네트워크 내에 있을 때만 로드된다는 점을 유의하시기 바랍니다. 보다 고급 연동을 위해서는 REST APIs도 사용할 수 있습니다.
지침:
1) 대시보드 임베드 링크 가져오기 - 대시보드 페이지에서 대시보드가 공유되었는지 확인한 후 해당 대시보드의 아이콘을 클릭하세요. 녹색 팝업 배너가 링크가 클립보드에 복사되었음을 알려줍니다. 이를 사용하여 아래 HTML iframe의 src 내용을 교체합니다.
2) 고정 크기로 대시보드 임베드하기
<html>
<head>
<title>Sprucely.io Dashboard</title>
</head>
<body>
<h1>Sprucely.io Dashboard</h1>
<iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
allow="clipboard-write"
style="height: 500px; width: 700px;"
title="Sprucely.io Dashboard"></iframe>
</body>
</html>
<head>
<title>Sprucely.io Dashboard</title>
</head>
<body>
<h1>Sprucely.io Dashboard</h1>
<iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
allow="clipboard-write"
style="height: 500px; width: 700px;"
title="Sprucely.io Dashboard"></iframe>
</body>
</html>
(또는) 동적 너비로 대시보드 임베드하기 - 상위 문서의 너비에 맞춰 대시보드 크기를 자동으로 조정합니다
aspect-ratio 스타일 매개변수를 사용하면 너비를 기준으로 높이를 자동으로 다시 계산할 수 있습니다.
<html>
<head>
<title>Sprucely.io Dashboard</title>
</head>
<body>
<h1>Sprucely.io Dashboard</h1>
<iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
allow="clipboard-write"
scrolling="no"
style="width: 100%; aspect-ratio: 1.5; border: none;"
title="Sprucely.io Dashboard"></iframe>
</body>
</html>
<head>
<title>Sprucely.io Dashboard</title>
</head>
<body>
<h1>Sprucely.io Dashboard</h1>
<iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
allow="clipboard-write"
scrolling="no"
style="width: 100%; aspect-ratio: 1.5; border: none;"
title="Sprucely.io Dashboard"></iframe>
</body>
</html>
3) 기타 유용한 임베드 옵션
iframe 요소의 style 블록에 사용자 지정 스타일을 추가하여 프레임의 디자인을 맞춤 설정할 수 있습니다. 이러한 매개변수는 표준 HTML CSS 가이드라인을 따릅니다. 아래 예시는 대시보드 주위에 회색 테두리를 추가합니다:
<html>
<head>
<title>Sprucely.io Dashboard</title>
</head>
<body>
<h1>Sprucely.io Dashboard</h1>
<iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
allow="clipboard-write"
style="height: 100%; width: 100%; border: 2px solid grey;"
title="Sprucely.io Dashboard"></iframe>
</body>
</html>
<head>
<title>Sprucely.io Dashboard</title>
</head>
<body>
<h1>Sprucely.io Dashboard</h1>
<iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
allow="clipboard-write"
style="height: 100%; width: 100%; border: 2px solid grey;"
title="Sprucely.io Dashboard"></iframe>
</body>
</html>