Please note that the CSS and Javascript on your website may affect the Shorthand Embed and changes may need to be done on your side, or added to your Shorthand theme, for it to work correctly.

Please read the entirety of this document to see if the Shorthand Embed is the right solution for you.

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

  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 parent elements of the page, as these break the browser's ability to stick content to parts of the screen during scrolling. If you notice scrollmation or reveal sections not working correctly it is probably due to overflow being set in your site template.  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.

Please note

While the embed emulates most aspects of a normally hosted Shorthand story, there are a few things that it cannot do, because of it relying on Javascript.  In particular:

1) Some internal search engines will not be able to index the content, in particular, the search engine on your CMS.  From our testing, bigger search engines like Google have no problems indexing embed content.  However you will still need to use meta-data in your CMS to enable site search.  

2) Social meta-data (Twitter and Facebook) will not work correctly with the embed, because they are not statically included as part of the page source, and instead are inserted dynamically by the embed.  To support these, the meta-data should be included directly into the page, usually using functionality provided by the CMS.

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="demos.shorthandstories.com/embedexample/"></div>
<script src="https://embed.shorthand.com/embed_6.js"></script>
  1. Call via code:
<script src="https://embed.shorthand.com/embed_6.js"></script>
<div id="sh_embed"></div>
<script>
var publishURL = "demos.shorthandstories.com/embedexample/";
Shorthand.embed("#sh_embed", publishURL);
</script>

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

<div data-shorthand-embed="demos.shorthandstories.com/embedexample/" data-shorthand-embed-bucket="hosted-accounts"></div>
<div data-shorthand-embed="demos.shorthandstories.com/embedexample/" data-shorthand-embed-bucket="my-s3-bucket"></div>
<div data-shorthand-embed="demos.shorthandstories.com/embedexample/" data-shorthand-embed-bucket="https://myhostedwebsite.com"></div>

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

<div data-shorthand-embed="demos.shorthandstories.com/embedexample/" 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.