We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to embed an image, video, or webpage using HTML in Label Widget?

Platform: Dashboard Platform |
Control: Dashboard Widgets |
Published Date: February 9, 2018 |
Last Revised Date: May 7, 2019

Steps to embed the image, video, and webpage in a label widget using HTML

Step 1: Drag and drop the label widget into the Dashboard Designer Layout.

Step 2: Click the edit button of the label widget, and add the needed HTML code. An image can be added using “img” tag, and webpages and videos can be embedded by using the “iframe” tag with proper size settings. The “src” attribute is needed while using these tags. You can assign the image, video, or URL link of a webpage to “src” attribute. You can also customize the iframe by using the style properties.

Sample HTML

<!DOCTYPE html>
<html>
<body>
<h2>Syncfusion Dashboard Platform</h2>
<img src="http://www.syncfusion.com/downloads/support/directtrac/general/syncfusion-dashboard-platform-69618073.png" alt="syncfusion.com" width="51" height="55">
 
<!-- Uncomment the following iframe tag to see a webpage in the Label Widget -->
<!-- <iframe name="Framename" src="https://www.syncfusion.com" height="720" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe> -->
 
<!-- Uncomment the following iframe tag to see a video in the Label Widget -->
<!-- <iframe src="https://www.youtube.com/embed/DHEFrjDgj2A" height="315"  width="560" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
 
</body>
</html>

 

Step 3: Align the contents using the user interface options, if needed.

Designer view:

Align the content of the Label

Step 4: Click Apply and select the Preview in the Dashboard Designer. The dashboard preview will show the expected visualization.

 

Viewer Preview: Image with text embedded using “img” tag

Embedded image displayed in Viewer

 


Viewer Preview: Webpage embedded using “iframe” tag

Embedded Webpage displayed in Viewer


Viewer Preview: Video embedded using “iframe” tag

Embedded Video displayed in Viewer

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon