Please note that the Shorthand Embed is currently in beta - if you are interested in participating, please let us know!

Shorthand Hosting Snippet

Once you have published your story, you can use our Shorthand Embed code to add the story to your own CMS.

Here's how:

  1.  Publish your story
  2. Click the "COPY EMBED CODE" button (shown in blue, below).  
  3. Within your CMS, paste the code into a post/article   (make sure full HTML is supported).  Previewing and/or publishing should show the full Shorthand story within your CMS.

For other hosting options, you can also use the embed - see the developer documentation further down the page.

Keep your story looking great (CSS)

Shorthand stories typically look and feel quite different to the other pages on your site, and may require some parts of your usual page templates (like page margins) to be hidden or modified to ensure the story looks as good as it does when previewed within the Shorthand editor.

This is achieved through CSS rules that can be included within the Shorthand story CSS, included as part of your custom theme (let us know if this appeals) or you can modify the CSS on your CMS yourself.

CSS tips

If you are going to edit CSS yourself, consider the following:

  1. Give the Shorthand story full page width  - this can mean hiding sidebars or margins that are within your usual page templates.  
  2. Make sure that there is no overflow:hidden or overflow-x:hidden on any ancestor elements of the page, as these break the browser's ability to stick content to parts of the screen during scrolling.  The embed code will warn you in the browser console if there is an element with this enabled.
  3. The embed automatically adds a class "shorthand-embed-body" to the <body> tag of the page - this lets you write CSS used by your entire CMS, but that will only affect pages with Shorthand content in it : just target that class.
  4. The embed currently does not support multiple Shorthand stories in a single page.  If you'd like to elegantly link between multiple Shorthand stories, we suggest you use a Shorthand Collection.

Developer documentation

Note that for the embed to work on custom hosting, CORS must be enabled on the server.

There are two ways to use the embed:

  1. Call via data attribute:
<div data-shorthand-embed=""></div>
<script src=""></script>
  1. Call via code:
<script src=""></script>
<div id="sh_embed"></div>
var publishURL = "";
Shorthand.embed("#sh_embed", publishURL);

Optionally you can include a bucket or absolute URL, e.g:

<div data-shorthand-embed="" data-shorthand-embed-bucket="hosted-accounts"></div>
<div data-shorthand-embed="" data-shorthand-embed-bucket="my-s3-bucket"></div>
<div data-shorthand-embed="" data-shorthand-embed-bucket=""></div>

Optionally you can use the story title and favicon by including these attributes:

<div data-shorthand-embed="" data-shorthand-embed-title data-shorthand-embed-favicon data-shorthand-embed-description></div>

Known Issues

1. Social meta data.  Social meta data does not get captured by Facebook and Twitter.  This is because the meta tags are added to the page after load via Javascript rather than as part of the pa`ge source.  If you need this data you will need to add it manually to the container page (such as via the CMS you are using).

2. Using other embeds within an embedded Shorthand story.  Some Javascript snippets have issues with the embed because they assume that they are being place directly in source code.  You can either put the embed directly in the page source or look for compatibility modes for the snippet.

3. Background media doesn't stick when scrolling. If a wrapping element on the page has an overflow, overflow-x or overflow-y of hidden, then it is not possible for the element to stick. We try to detect this and print an error, so please check the developer console on the page where the embed is set, or manually check ancestor elements.