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.
- 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.
If you are going to edit CSS yourself, consider the following:
- 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 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.
- 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.
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.