Congratulations, you've found your way to one of Amplenote's most high-leverage features. 💪
Embedding note content is a huge leverage opportunity because it can lift dense, information packed ideas from your notebook and spread those ideas globally, in real time, via your website, help section, blog, wiki, or anywhere else you can place Javascript and you want to insert an idea. 🌍
The first step to embedding note content is publishing the note, following the steps above. Once the note is published, you can click the second tab in the "Publish" dialog, for embedding content:
Several options available for configuring how your note is embedded
A brief overview of the options currently on offer:
HTML to embed: The HTML you need to paste into a web page to start loading an almost-real-time version of this note.
Add Host Domain (optional): If checked, controls how links behave and enables the inclusion of a stylesheet.
Host Domain (optional): The domain on which this content is to be published. Not necessary, but when specified, then links in the note that point to URLs within the Host Domain will not pop an interstitial window before visiting clicked link.
Stylesheet (optional): Control how note styles are interpreted. See a live example of note content with a stylesheet applied at the GitClear blog.
link🎩 How can I style my Amplenote-based blog to look professional?
We recommend taking a look at Use case: Create your own CSS styled blog with Amplenote to replace Wordpress to see an example case with specific styles that can be used to format your Amplenote notes like the reader-friendly site, Medium.
link☕ How does load time of embedded content look to a visitor?
If you're an SEO specialist or a developer with a fine-tuned eye for page latency, you're likely to appreciate the several rounds of optimization that have been spent to ensure that embedded content loads ~immediately, alongside neighboring page content:
A brief demo of loading embedded content. Repro the demo for yourself at the blog post featured in this 16s movie. To be clear, there is extensive caching used to achieve this result, but none if it happens on the client -- all of the caching happens server-side so it remains snappy to every new visitor.
How can content from your (offline-compatible) notebook be rendered to an arbitrary web browser from around the world in less than 200ms? The most important step is the CDN caching we undertake to populate edge nodes with a 2 hour time-to-live when any embed content is requested. While the initial request has been observed to take up to 350-500ms, for however long thereafter you receive a visit within a 2 hour window, your content will remain propagated to edge nodes where it can be served to visitors at lightning speed. Even when the browser is a new visitor has never visited Amplenote or cached any of the stylesheets or javascript used to render embedded content. 🎩