The ability to add custom code is only available on some Shorthand plans. To discuss adding these features, please get in touch.
Shorthand allows you to add HTML to stories, enabling the addition of custom components and layouts that aren't natively supported by the Shorthand editor.
HTML can be added inline (into any text column), or via a standalone full-width section (Custom HTML section), or via other fields as described below.
Inline custom HTML
Inline HTML can be added to text blocks in any section. Content added via inline HTML will usually be confined to the width of the corresponding text column, so it's a good option for when you need the content to fit within a specific context, for instance, in between paragraphs of text or in a grid item.
Custom HTML section
If your plan supports it, a section composed entirely of your custom code can be added from the same section chooser as other Shorthand sections. Within the Editor it will appear as a grey section with a scrollable content area in which to compose or paste your code.
A Custom HTML section within the Editor
Previewing the story will show the results of the code being applied rather than the code itself.
Within the Editor, Custom HTML sections can be reordered, deleted, linked to, and saved as section templates. Content added to a Custom HTML section will be subject to the full width of the page, which may require more care and coding to ensure that the content fits well within your story design.
Using media in Custom HTML sections
You can have your Custom HTML section reference images or video within the code, and these will be published with your story.
To do so, within the Custom HTML section code panel, place your cursor at the point at which you wish to reference the media, then click the ADD MEDIA button in the top-left of the code window:
This will open the media panel, in which you can select media from your computer or media library (and alternate versions for Large and Small screens if you wish). Within the code panel, the media is then represented as a green bar with a small preview of the image or video and an optional input field to assign it a class name. Within the code panel, the bar itself can be selected/manipulated like text in order to copy, paste, or delete it.
When using this feature you will likely need to use the class field and add custom CSS to the HTML or to the CSS tab at the top of the story editor to ensure that the image is styled correctly.
Other options for custom HTML and embedding
The JS/JavaScript editor
At the top of the story editor is a tab labelled JS that opens an input field that is primarily intended for adding JavaScript code between <script></script> elements that will be injected at the end of the page <body>, however you can also add general purpose HTML here if needed.
If you're building a Shorthand Project, you also have the option of adding code to the Javascript field under the Custom code tab under the Project settings and it will be applied to all stories within the Project.
Code added to these fields will not execute in the story editor.
The Custom <HEAD> input
Within the Settings tab, which is accessible from the top-left of the story editor, is an input where you can add HTML that you want added to the end of the page <head>.
If you're building a Shorthand Project, you also have the option of adding code to the Custom Head field under the Analytics tab (it's often used for custom analytics code but it's not exclusively for that purpose) under the Project settings and it will be applied to all stories within the Project.
Code added to these fields will not execute in the story editor.
Rich Embed
If you're embedding content from a third-party and they provide you with a URL for embedding, you can try using that URL with our Rich Embed feature, which may provide better results or be easier to use then embedding code.
For tips on third-party tools to explore, see Other Resources.
Tip: We recommend that you write and edit your custom code in a dedicated code editor (such as Visual Studio Code) and pasting into Shorthand. This will be much more efficient and provide better formatting and debugging options, and you'll also have access to tools and revision tracking that are not available in Shorthand.
Note on responsive design: Whether you're using an embed code for a third-party tool or your own custom coding, please ensure that you thoroughly test how it behaves in your story and that it's fully responsive across screen sizes. You may find Embedresponsively.com helpful in fixing code that isn't responsive.