[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["難以理解","hardToUnderstand","thumb-down"],["資訊或程式碼範例有誤","incorrectInformationOrSampleCode","thumb-down"],["缺少我需要的資訊/範例","missingTheInformationSamplesINeed","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-09-11 (世界標準時間)。"],[],[],null,["# Get started with private embedding\n\n| **Knowledge check:** This page assumes you know the basics of Inline Frame \\\u003ciframe\\\u003e HTML elements, Uniform Resource Locators (URLs), and third-party cookies. Check out the MDN web documentation on [iframes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) to familiarize yourself with the basics.\n\nThis page will walk you through how to set up private embedding. The private embedding option requires that you manage the \\\u003ciframe\\\u003e HTML element directly to embed your Looker content and requires that the user log in to Looker separately from the host application.\n\nWe will walk through this private embedding code example: \n\n \u003ciframe\n src=\"https://instance.looker.com/embed/dashboards/4?Timeframe=14+day\"\n width=\"600\"\n height=\"300\"\n frameborder=\"0\"\u003e\n \u003c/iframe\u003e\n\n| **Note:** The following directions apply to all embeddable Looker content: [dashboards](/looker/docs/creating-user-defined-dashboards), [LookML dashboards](/looker/docs/building-lookml-dashboards), [Explores](/looker/docs/creating-and-editing-explores), [Looks](/looker/docs/saving-and-editing-looks), query visualizations, and [extensions](/looker/docs/extension-overview).\n\n1. Build the embed content URL\n------------------------------\n\n| **Note:** This page describes how to manually build the embed content URL. You can also [generate an embed URL](/looker/docs/private-embedding#generating_an_embed_url) from a Looker dashboard, Look, or Explore.\n\nConsider an example of Looker content at the URL `https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day`. From this Looker content URL, we will construct the **embed content URL** and set the iframe's `src` attribute to it. Feel free to use your own Looker content URL as you work through these steps.\n\nThe embed content URL from the preceding code sample is follows: \nhttps://instance.looker.com/embed/dashboards/4?theme=red\\&Timeframe=14+day\n\nThe embed content URL consists of three parts:\n\n- Hostname: your Looker instance's hostname\n- Path: Looker content URL path prefixed with `/embed` (with extra steps for query visualizations)\n- Parameters: URL parameters that specify filters and theming\n\nThe protocol must always be `https://`. Let's build each part in detail.\n| **Note:** As a shortcut, think of the **embed content URL** as your complete Looker content URL with `embed/` prefixed to its path (unless you're embedding [query visualizations](/looker/docs/gs-private-embedding#embedding_a_query_visualization)).\n\n### Part 1: Hostname\n\n1. Navigate to your Looker content. Following the example Looker content URL: `https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day`.\n2. Your embed content URL hostname is `instance.looker.com`.\n\n\u003e | **Note:** The hostname includes the port number, if present, e.g., `instance.looker.com:9999`.\n\n### Part 2: Path\n\nYour embed content URL path depends on the Looker content you embed.\n\n#### Embedding all Looker content except query visualizations\n\n1. Navigate to your Looker content. Following the example Looker content URL: `https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day`\n2. Identify your Looker content URL's path: `/dashboards/4`.\n3. Prefix `/embed` onto your Looker content URL's path. Your embed content URL's path is `/embed/dashboards/4`.\n\n#### Embedding a query visualization\n\n1. Navigate to your query visualization. Example URL: `instance.looker.com/explore/my_model/my_explore?qid=1234567890abcdefghij12`\n2. Identify your query client ID. The `qid` parameter: `1234567890abcdefghij12` is your query's client ID that represents the query and the visualizations settings.\n3. Your embed content URL path is `/embed/query-visualization/` appended with your query client ID. The example embed content URL's path is `/embed/query-visualization/1234567890abcdefghij12`\n\n| **Note:** You can also find the query client ID with the Looker API [Get Query](/looker/docs/reference/looker-api/latest/methods/Query/query) method as the `client_id` field of the `Query` object.\n\n### Part 3: Parameters\n\nYour embed content URL parameters control your embedded content's filters and theming.\n\n#### Filters\n\n1. Navigate to your Looker content URL.\n2. Manually adjust the content's filters to what you want. For this example, your resulting Looker content URL is: `https://instance.looker.com/dashboards/4?Timeframe=14+day`\n3. Your embed content URL parameters are the Looker content URL parameters, for example, `Timeframe=14+day`\n\nIn this example, the parameter `Timeframe=14+day` sets the value of the dashboard's `Timeframe` filter.\n| **Note:** The filter parameter does not create the filter, it must exist on the dashboard beforehand.\n\n#### Theming\n\nCheck out the [theming guide](/looker/docs/themes-for-embedded-dashboards-and-explores#specify_theme) to read about how to control the appearance of your embedded content.\n\n2. Test your embed content URL\n------------------------------\n\nOpen your embed content URL in your browser to preview your embed content's behavior and appearance.\n\n3. Create your iframe\n---------------------\n\n1. Create your iframe element in your host application.\n2. Set the `src` attribute to your embed content URL.\n3. Define the `width`, `height`, and other attributes to what you need to best display your embedded Looker content.\n\n4. Consider user access issues\n------------------------------\n\nThe user must be logged in to Looker to view your embedded content. The iframe will show a 401 error page if the user is not logged in.\n\n### User login options\n\nYour user can log in to Looker in one of two ways:\n\n#### 1. Log in to Looker beforehand\n\nYour user must log in to Looker on the same browser before they can view the embedded content.\n\n#### 2. Enable an optional embed Looker login screen\n\nAdd `allow_login_screen=true` to your embed content URL parameters to present a Looker login screen in the iframe if the user is not signed in. Our example embed content URL becomes: `https://instance_name.looker.com/embed/dashboards/4?Timeframe=14+day&allow_login_screen=true`\n\nKeep in mind two caveats:\n\n- You must [disable the Same-Origin Protections for Looker Login Pages setting](/looker/docs/admin-panel-platform-embed#same-origin_protections_for_looker_login_pages) to enable the Looker login screen in the iframe embed.\n- If your Looker instance authenticates users using single sign-on (SSO) with an identity provider, your identity provider may block the login screen within your iframe. You will need to use option 1 if this happens.\n\n### User browser cookie policy\n\nLooker uses cookies for user authentication and session storage. Your user's browser must enable third-party cookies if your user accesses your Looker instance embed content URL's hostname is under a different domain from your host application.\n\nSome browsers, such as Firefox and Safari, default to a cookie policy that blocks third-party cookies. If the user's browser cannot allow third-party cookies, you can [add a custom domain to your Looker instance](https://discuss.google.dev/t/how-do-i-get-a-custom-url-domain/119506) so your host application and embed content URL's hostname Looker instance reside under the same domain.\n| **Note:** You can view a list of the cookies that Looker uses on the [Looker cookie list](/looker/docs/cookie-list) documentation page.\n\n5. Interact with your iframe\n----------------------------\n\nGet started with [Looker embedding iframe post messaging](/looker/docs/embedded-javascript-events).\n\nNext steps\n----------\n\nGet started [with signed embedding using our Embed SDK](/looker/docs/embed-sdk-intro) and check out [examples](https://github.com/looker-open-source/LookerEmbedReference) of what you can do with Looker embedding."]]
