QuickSight Q Embedded Search Bar not showing

Hello everyone,

I’m experiencing an issue with the embedded Amazon QuickSight Q search bar in my application. The search bar is not displaying correctly; it appears as a blank space in the browser. I’ve checked through some common troubleshooting steps but haven’t had much luck resolving the problem.

I am clicking directly the embedded urls generated directly (for dashboard and search bar) and only dashboard is showing.
Even if I add the response to an iframe the problem persists.

The part of the code for embedding:

 dashboard_config = {
            'InitialDashboardId': dashboardId,
            'FeatureConfigurations': {}
        }
        experience_config = {
            'Dashboard': dashboard_config,
        }
           response = quicksightClient.generate_embed_url_for_registered_user(
                AwsAccountId=accountId,
                ExperienceConfiguration=experience_config,
                UserArn=userArn,
                SessionLifetimeInMinutes=30
            )
urls.append(response['EmbedUrl'])

  q_search_bar_config = {
      'InitialTopicId': topicId
  }
  
  experience_config_q = {
      'QSearchBar': q_search_bar_config
}
  
  response = quicksightClient.generate_embed_url_for_registered_user(
        AwsAccountId=accountId,
        ExperienceConfiguration=experience_config_q,
        UserArn=userArn,
        SessionLifetimeInMinutes=30
    )
 urls.append(response['EmbedUrl'])

Here’s a summary of what I’ve looked into so far:

Issue: The embedded Amazon QuickSight Q search bar is not displaying or functioning as expected.

Potential Causes and Checks:

  1. Front-end Implementation:
  • I’m using the latest version of the QuickSight Embedding SDK.
  • There are no JavaScript errors in the browser console related to the embedding code.
  • The element in the html code seems to be created correctly but is not shown and doesn’t seem to have an specific style
  1. Configuration:
  • The domain I am using to display the embedded url is already registered in the Allowed Domains for Embedding of Quicksight.
  • The QuickSight reader or author ARN is authorized to view the dashboards in the embedding parameters.
  • I’ve verified that the AWS region used for embedding matches the region of the QuickSight dashboard.
  1. Code Implementation:
  • The QuickSight embedding URL appears to be generated correctly, and the “QSearchBar” parameter is included in the ExperienceConfiguration.
  • I’m not seeing any errors or exceptions being thrown during the embedding process.
  • With the same approach, I am generating the url for a dashboard and it actually shows

Troubleshooting Steps Taken:

  • Updated to the latest QuickSight Embedding SDK version.
  • Enabled detailed logging and error handling in my application to catch any issues.
  • Double-checked IAM permissions, QuickSight dashboard configuration, and AWS region settings.

Despite these efforts, the issue persists. If anyone has encountered a similar problem or has additional suggestions, I’d greatly appreciate your help.

Thank you!

Hi @Adolfo,

Welcome to QuickSight Community and thank you for posting a question!

I just would like to check with you,

  • if the account you are using for the embed dashboard has Amazon Q in QuickSight enabled.
  • if the user has one topic shared with

kind regards,
Wakana

1 Like

Hi @Adolfo,
It’s been awhile since we last heard from you. Are you still encountering the same issue as your initial topic or were you able to find a work around?

If we do not hear back within the next 3 business days, I’ll go ahead and close out this topic.

Thank you!

Hi @Adolfo,
Since we haven’t heard back, I’ll go ahead and close out this topic. However, if you have any additional questions, feel free to create a new topic in the community and link this discussion for relevant information that may be needed.

Thank you!