Shorthand Hosting SnippetOnce you have published your story via either Shorthand Hosting or Custom Subdomain Hosting options, you can use our Shorthand Embed code to easily add the story to your own CMS. Shorthand Embed is available to customers on Pro and Premium plans.28 May 2021We have released an updated version of the Embed code that is faster to load and provides an overall better experience for readers.For most Shorthand users the embed process will not have changed - it remains just copy and paste - but if you are using a customised version please contact us via help@shorthand.com to discuss how to migrate to the updated code.Any already published stories will continue to work as normal using the previous embed code.Here's how: Publish your storyClick the "COPY EMBED CODE" button: Within your CMS, paste the code into a post/article (making sure full HTML is supported).Previewing and/or publishing should show the full Shorthand story within your CMS.NOTE: If your hosting location changes you will need to republish your story.Here is an example of the embed as used by The World BankFor 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, or you can modify the CSS in your CMS yourself.CSS tipsGive 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 tag of the page - this lets you add CSS to your CMS that will only affect pages with Shorthand content in it by only targeting 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.Please noteWhile 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 metadata in your CMS to enable site search.  2. Social metadata (Twitter and Facebook) will not work correctly with the embed. This is because they are not statically included as part of the page source, and instead are inserted dynamically by the embed.  To support these, the metadata should be included directly into the page, usually using functionality provided by the CMS.Developer documentationNote that for the embed to work on custom hosting, CORS must be enabled on the server.There are two ways to use the embed:Automatically loaded. Place the script in the page where you want the story to be loaded.Manually loaded. First, place this script in the HEAD section of the page template.
And then place a special DIV in the page where you want the story to be loaded. Make sure the DIV contains a data-shorthand attribute that points to the story's URL. Optionally you can use the story title, favicon, etc by including any/all of these attributes:Known IssuesSocial metadata. Social metadata 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 page 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).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 metadata in your CMS to enable site search.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.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.Double tracking. If you have tracking (e.g. Google Analytics) on your Shorthand theme, AND you have tracking setup on your CMS, this may cause your tracking results to be doubled. To avoid this issue please use only one or the other when tracking embedded stories.