Embedding css / html when not using the embedding SDK - better embedding experience for users

Question & Answer
,
1

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&amp;identityprovider=quicksight&amp;isauthcode=true&amp;undoRedoDisabled=true&amp;resetDisabled=true&amp;punyCodeEmbedOrigin=https://democentral.learnquicksight.online/-&amp;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&amp;identityprovider=quicksight&amp;isauthcode=true&amp;themeId=b5ccb414-8941-46df-b9d1-af2787e58b8a&amp;punyCodeEmbedOrigin=https://democentral.learnquicksight.online/-&amp;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.

2

Are you talking about the side menu or the actual dashboard?

1 Like
3

The Actual dashboard

4

The actual dashboard can only be controlled via themes.

5

Yeah I’m good with the actual look of the dashboard, I’m more so looking for help with embedding.

Embedding iframes and making them look good is hard, but on DemoCentral they’ve done a great job. I’m not interested in the dashboard code / themes, as most of it you can already see by just hitting the edit button on the left sidebar.

I’m just curious how they got the actual iframe for those dahsboards to look so good and fit the page so well.

6

I don’t know if the AWS teams have examples.

That would need to be coded up by you or your team