This feature is currently in BETA. 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 via either Shorthand Hosting or Custom Subdomain Hosting options, you can use our Shorthand Embed code to add the story to your own CMS.
- Publish your story
- Click the "COPY EMBED CODE" button (shown in blue, below).
- 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.
- Give the Shorthand story full page width - this can mean hiding sidebars or margins that are within your usual page templates.
- 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.
- 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.
- 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.
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.
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:
- Call via data attribute:
- 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:
Optionally you can use the story title and favicon by including these attributes:
demos.shorthandstories.com/embedexample/" data-shorthand-embed-title data-shorthand-embed-favicon data-shorthand-embed-description></div>
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.