Embeding Content not getting after Embed the Q Bar URL

I got embedding URL for the Quicksight Q bar from aws-quick sight-sdk
After that I tried to embed that URL into my angular application
I have got iframe element into my application but application-content is missing
Please refer to the screenshot below

Is anything missed from my side… please help me

Hello @jayakumarim, if the div is appearing in the html, what error messages are you receiving in the network tab? It might be a permissions issue that you haven’t set localhost to be accepted by QuickSight or you may be missing some details in your query to QuickSight.

If you can take screenshots of the actual query you wrote to retrieve the embedding url and the error you are getting from the network, I can try to guide you further.

Hi @DylanM ,
I didn’t see any ERROR in the network tab, I am able to get the Embed URL
Here is the code, for how I am generating an emending URL. Please correct me if anything is wrong

@DylanM ,
Please help me out to is there anything is missed my side,
event i didn’t see any ERROR to fix it.

Hi,
If any more details required from me, please let me know
Please help me out to fix it

Anyone help me out with this
I am trying to fix it for 3 days, but not been able to find the reason and solution

Hello @jayakumarim, if you go into the QuickSight console, select the manage QuickSight option (appears in the dropdown when you select the person icon in the top right corner), and go to the domains and embedding section, have you added localhost for testing? Maybe it is failing to open in your local testing environment because of this.

Otherwise, maybe it is a formatting issue on the div that is containing the embedded Q url that isn’t set properly. When you hover over that portion of the html in the dev tools, is it highlighting something on your screen where the container is supposed to exist?

Hi @DylanM
I added my domain to the domains and embedding section

and the div container is highlighted when I hover on in the dev tools

And , I got the below domain from quick-sight response. Is that also need to be included in allowed domains? Please let me know

Hi @DylanM ,

What does it’s mean “The keyword ‘searchfield-cancel-button’ used on the ‘appearance’ property was deprecated and has now been removed. It will no longer have any effect”
I got this as warning

Please explain this and help to fix it if it causing the issue to embedding

Please someone help me with this

Hello @jayakumarim, the warning you are seeing should not have any impact on the Q Search Bar actually loading, but it won’t help either. Deprecated just means that functionality no longer exists.

I am looking through the Q Search Embedding SQK docs in Github to try and figure out what is missing. One of the things I am noticing is the class name for your div is not the experience-container. It could be something as simple as that is the class it is expecting in the embedding logic and it doesn’t have a referencable div to store the iframe.

I am thinking you may have better luck debugging this directly with the support team. I would recommend filing a case with AWS Support where we can dive into the details to help you further. Here are the steps to open a support case.

They should be able to guide you further.

Thank you for the response @DylanM ,
What is the THEAM_ID here? Is this a topic ID? Please let me know

1 Like

Hello @jayakumarim, Theme ID is the theme you would have linked to a dashboard. It basically provides the color scheme for a dashboard and visual layouts (like spacing between visuals, borders, etc.). It is not the topic ID. Here is some documentation on themes as well:

Hello @jayakumarim, since we have not heard back from you with any remaining questions, I will archive this topic. If you still need assistance with this issue, please post a new topic in the community and link to this question to provide relevant information. That will ensure you are at the top of the priority list for a response from one of our QuickSight experts. Thank you!