# Building an embed that works with API\_KEY

**URL:** <https://talk.observablehq.com/t/building-an-embed-that-works-with-api-key/6038>\
**Category:** Help\
**Created:** [January 6, 2022, 10:07am UTC](https://talk.observablehq.com/t/building-an-embed-that-works-with-api-key/6038 "2022-01-06T10:07:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [January 6, 2022, 10:07am UTC](https://talk.observablehq.com/t/building-an-embed-that-works-with-api-key/6038/1 "2022-01-06T10:07:53Z")

</div>

I am trying to make my own embed feature that works with API\_KEYs. I have a version working here:

> **[Team embed](https://observablehq.com/@endpointservices/embed)**
>
> Observable's embed does not support passing an API key so you cannot expose team notebooks. This notebook enables embeds from shared team notebooks by exposing a URL of the form:- Where \`NOTEBOOK\_ID\` can be either the \`d/$\` or \`@/\` form. Obviously...

in the existing public notebook embed feature, the user code is served from a usercontent domain in an iframe, which is a useful way to discover who owns the code by sniffing the src URL. However, the full URL is unguessable so we can’t reuse that.

The way I am doing in a way that is untamperable, is having the embed server lookup the notebook owner using @mootari/notebook-data and setting headers when it serves it. The embed form then statically rendered the required configuration for the client to then also fetch the source code and hydrate the embedded notebook.

This is slower than necessary because I end up fetching the source twice (serverside and clientside). It would be nice if I could somehow statically render the module source code into the embed form, so the client does not need to call observable API itself, given I have the data at hand anyway. However, v3 API export uses ‘export’ keyword which cannot be inlined into a script tag so I am not sure if I can fix this.

With private team notebooks the slug is always d/klhasdlkhajsd, so its hard to know who the author is. So I feel the embed server always has to make an API call to discover that. I am using mootari/notebook-data but that is less than ideal as is a v1 API call (slower than v3) and fetches more info than I need.

Anybody got any ideas. What I have now is ok but I would love to shave off a network call if I can.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 9, 2022, 6:59pm UTC](https://talk.observablehq.com/t/building-an-embed-that-works-with-api-key/6038/2 "2022-05-09T18:59:49Z")

</div>

Not sure if it helps, but you can dynamically import object URLs:

```javascript
import(URL.createObjectURL(new Blob([`
export default "foo"
`], {type: 'text/javascript'})))

```