Add custom content or formatting inside a story by using inline HTML.
Overview
Place custom HTML between text blocks in a Shorthand story ini order to use third-party embed code, custom components, and/or formatting that needs to appear in a specific position.
Content added with inline HTML is usually confined to the width of the text area in which it is placed.
Inline HTML is available only on some Shorthand plans. If Insert HTML is not available after you follow the steps below, contact the Shorthand team to check your workspace access.
Choose the right option
Inline HTML: Place custom HTML between text blocks in a text column
Custom HTML section: Build a standalone, full-width section with custom code
Rich Embed: Add supported third-party content by pasting its public URL
Tip: If a third-party service gives you a public URL, try Rich Embed before adding embed code manually.
How to add inline HTML
Open the story in the Shorthand Editor.
In a section with a text block, hover above or below the block to show the insert bar.
Select Insert HTML.
A code box appears into which you can type or paste HTML:
An ADD MEDIA button to the top-left of the code input box enables uploading or selecting of images or video that can be referenced in the code. The added media appears in the code box as a green bar with a small preview of the media and space for assigning it a class name:
The Custom HTML input box showing added media and code
Select Save changes.
After saving, the Custom HTML block will show within the Editor as a smaller block of code. Mouse over it and select EDIT CODE to update it:
To see the effect of your code on the story, preview the story.
Important: Preview the story at multiple browser sizes and on different devices before publishing. Custom HTML and third-party embeds may not adapt to every screen size automatically.
Inline HTML best practices
Write and test code outside Shorthand
Write and test complex code in a dedicated code editor, such as Visual Studio Code, before pasting it into Shorthand.
A dedicated code editor provides better formatting, debugging tools, and revision history.
Keep styles contained
Custom styles can affect other parts of a story when multiple blocks use the same class names or broad CSS selectors.
Use unique class names for unrelated components
Avoid repeating conflicting CSS rules in several inline HTML blocks
Prefix rules with a section ID when a style should apply to only one section
See Custom CSS tips and examples for section-specific targeting.
Keep embedded content accessible
Custom code can introduce accessibility issues that Shorthand cannot correct automatically.
When adding an iframe, include a unique and descriptive title attribute:
<iframe
title="Interactive regional map"
src="https://example.com/map">
</iframe>
The title helps screen reader users understand the iframe’s purpose. See the accessibility checklist for more guidance.
Use a Custom HTML section for full-width content
Use a Custom HTML section when the custom content needs to:
Use the full width of the story
Behave as a standalone section
Be reordered, linked to, or saved as a section template
Reference media from the Shorthand media library through Add media
Troubleshoot inline HTML
The Insert HTML option is missing
First, confirm that you are hovering above or below a text block in a text column. Insert HTML appears in the insert bar between text blocks.
If the option is still missing, inline HTML may not be included in your Shorthand plan. Contact the Shorthand team to check your workspace access.
The HTML does not appear in the editor
This is expected. The story editor displays an editable Custom HTML block instead of the finished content. Select Preview to see how the HTML renders.
Shorthand reports invalid HTML
Check the code for:
Missing opening or closing tags
Extra closing tags
Incorrectly nested elements
Incomplete embed code copied from another platform
Validate the complete code in a dedicated code editor, then paste the corrected version into the inline HTML block.
A style change affects other HTML blocks
Check whether the affected blocks use the same class names or repeat conflicting CSS rules.
Use unique class names for separate components. If a rule should affect only one section, prefix the selector with that section’s ID.
A third-party URL is not accepted
Rich Embed supports many public URLs, but not every platform or URL can be processed.
If the provider supplies HTML embed code instead of a supported public URL, add that code with inline HTML or a Custom HTML section.
FAQs
What is the difference between inline HTML and a Custom HTML section?
Inline HTML appears inside a text column and is normally constrained to that column’s width. A Custom HTML section is a standalone section that can use the full width of the story.
Why can’t I see the finished HTML in the editor?
Shorthand displays an editable Custom HTML block in the editor instead of rendering the finished content. Select Preview to see how the HTML renders.
Should I use inline HTML or Rich Embed?
Use Rich Embed when a third-party platform provides a supported public URL. Use inline HTML when you have HTML embed code or need custom content in a specific position inside a text column.
How do I use an image or video from the Shorthand media library in custom code?
Use a Custom HTML section and select Add media from its code panel. You can then choose media from your computer or the Shorthand media library, including alternate versions for large and small screens.
Is inline HTML available on every Shorthand plan?
No. Inline HTML is available only on some Shorthand plans. Contact the Shorthand team if Insert HTML is not visible after you check the insert bar around a text block.
Can Shorthand debug my custom code?
Custom code requires a basic working knowledge of HTML and CSS. Shorthand can help confirm how the feature works, but a charge may be required to debug or fix custom CSS.