This is pretty vague as it depends on the html / css I already have in my web application. I’m probably not alone in not using the embedding SDK for my embedding needs and instead just indexing the dashboard / visual URLs.
Could anyone provide some good html / css to match what’s being done on demo central where the dashboard essentially becomes the web app?
Is there anyway I can get access to the classes / css used in the DemoCentral web app here ?
I’ve tried messing around with inspecting it in the browser without much luck. Specifically these elements and any child elements to these divs.
<div id="QuickSightScreens">
<div id="DashboardEmbedDiv"><iframe class="quicksight-embedding-iframe EmbedIframe" width="100%" height="100%" scrolling="no" src="https://us-east-1.quicksight.aws.amazon.com/embed/550224d7e7354267bbfa2089cceddf7b/dashboards/a7d49adb-aa35-4089-8cf0-6ffc5a600e80?code=AYABeEwRxpAWOt9IKAhOwxq1SE4AAAABAAdhd3Mta21zAEthcm46YXdzOmttczp1cy1lYXN0LTE6MjU5NDgwNDYyMTMyOmtleS81NGYwMjdiYy03MDJhLTQxY2YtYmViNS0xNDViOTExNzFkYzMAuAECAQB4Q4pdZrmYHprS_1qu_Ad4K1Kwv7kyEcenFNvHMd9HVw8BmNsjbvWnGQ69lFmiL6eDbAAAAH4wfAYJKoZIhvcNAQcGoG8wbQIBADBoBgkqhkiG9w0BBwEwHgYJYIZIAWUDBAEuMBEEDBPzTh2OQWfygzWmawIBEIA7XQj9ZM5Ozxl-p4aedO4thtY130N35bqLvZ5EBLsMCJCh_WEhTKUz44ZUjZWwWUgH8Y1Hs1GZOKHXzlkCAAAAAAwAABAAAAAAAAAAAAAAAAAAZBAJksBUqPDAuiMauKoiUP____8AAAABAAAAAAAAAAAAAAABAAAAmzHRZC3D7fQy5gcsZ4uzhw3N1_IuaoW8f6k12UL3cvQqA4MCSLzEZ_BuxynezNtO_sKzQ8JDBYRWkJU1QNjoCP3RxjAhYdGB3KRhLaA5-BkhEoTqlAHuzyadW4vo5K8DMyDFS7_mH3hgVgKwtkqeybrcV1OBdu6_x1vy35bc7Qt4rLMG5ekcX1HKmHfOYkS_kJTx0AkbQnCHHy0gIWmJKBJmYMC7--OGGZ_Wcg%3D%3D&identityprovider=quicksight&isauthcode=true&undoRedoDisabled=true&resetDisabled=true&punyCodeEmbedOrigin=https://democentral.learnquicksight.online/-&printEnabled=false" style="border: 0px; padding: 0px;"></iframe></div>
<div id="ReaderDashboardEmbedDiv"></div>
<div id="SessionContainer">
<div id="SessionEmbedDiv"></div>
<div id="CodeEditorDiv"></div>
<div id="CodeEditorHandle">
<img style="vertical-align:text-top;pointer-events:none;" src="https://democentral.learnquicksight.online/v2/images/DragHandle.png">
</div>
</div>
<div id="QContainer" style="background-color: rgb(255, 255, 255);">
<div id="QEmbedDiv"><iframe class="quicksight-embedding-iframe" width="100%" height="100%" scrolling="no" src="https://us-east-1.quicksight.aws.amazon.com/embedding/3237784457fb4b9eb7f7124a91c9c878/q/search/thcBzKXGFkXwMtVkfztJJf7310tsC0U0?code=AYABeBKbRZlil6y-0rpaCHLgggUAAAABAAdhd3Mta21zAEthcm46YXdzOmttczp1cy1lYXN0LTE6MjU5NDgwNDYyMTMyOmtleS81NGYwMjdiYy03MDJhLTQxY2YtYmViNS0xNDViOTExNzFkYzMAuAECAQB4Q4pdZrmYHprS_1qu_Ad4K1Kwv7kyEcenFNvHMd9HVw8B8_IhhWeds987y35VLnSlCwAAAH4wfAYJKoZIhvcNAQcGoG8wbQIBADBoBgkqhkiG9w0BBwEwHgYJYIZIAWUDBAEuMBEEDCrJzv6gHn-pq8n8_wIBEIA7P63nats65yEfSG1CKjN7g525VtjtXa1YEVWXHWY8UD63JxQ6v5-kRSnV_n6TQteEKVRp0sIFn-r-kDYCAAAAAAwAABAAAAAAAAAAAAAAAAAA6oL4oUm-c1G1-zkhfLkdVf____8AAAABAAAAAAAAAAAAAAABAAAAm11T-TYqfLhhvK0YWFygFvdpiRec-SiRkKFbVSjfFBNYQ6VMke75DK8ny98dnTiF5uxEb_ztnV0NmeFRSYrJrCXU2s23cRAckflrFee2BdMTpZooZu5ljL0pq0DHcYAF2AlKXG0INNEUdBfXet1l3wm0xeP5_2Wx6bkRO0rJG6i0bJr4OMCDi6RFCU1C5N_7pnI0-8kgbK5adMuha6QV6lyLYmb5Cs8bpnQ2gg%3D%3D&identityprovider=quicksight&isauthcode=true&themeId=b5ccb414-8941-46df-b9d1-af2787e58b8a&punyCodeEmbedOrigin=https://democentral.learnquicksight.online/-&printEnabled=false" allowtransparency="true" style="border: 0px; padding: 0px;"></iframe></div>
</div>
<div id="CustomDemoContainer"></div>
<div id="QuickSightBackdrop" onclick="CloseBrowsePanel()"></div>
</div>
My embedding experience tends to go wrong with the height of the iframe.
Example code from my web, I’m using adminlte3, so a mix of bootstrap and some specific adminlte components. Can also check the web app out on my github here
<div class="content-wrapper" style="overflow: hidden !important;">
<section class="content" style="padding: 0px !important; width: 100% !important; height: 100% !important; overflow: hidden !important;">
<div class="container-fluid" style="width: calc(100vw - 80px) !important; height: calc(100vh - 90px) !important; padding-right: 0 !important; padding-left: 0 !important; overflow: hidden !important; ">
<div class="row">
<div class="col-12">
<div class="iframe-container">
<iframe id="viz-frame"></iframe>
</div>
</div>
</div>
</div>
</section>
</div>
I’m not hoping to make this something that looks great on any device but I think DemoCentral looks great on desktop, tablets, and mobile! The main reason not using the SDK is to avoid needing to add another cloud resource like lambda / ec2 and sending credentials to generate a URL with a static serverless web app.