You can embed a SharpCloud story into a webpage via the use of an iframe. There are a few recommendations when embedding a story:
- Keep the first view simple. When using SharpCloud, it is great to visualise complexity, but to people who are less experienced with SharpCloud, it can sometimes seem daunting. It’s a great idea to create a simple first view, to slowly introduce the concepts to viewers.
- It is useful to create a presentation and set it as a default presentation, so when users enter or see the SharpCloud story, they will be given an option to play a presentation or explore the story. It is worth noting that any viewers can view any presentation that is within the story, so be sure to check all presentations are relevant.
- Creating an info page either on the website or using a SharpCloud view, to provide information on how to navigate around the SharpCloud story and draw attention to viewers to the key aspects of the story.
If you wish to embed a story on a website, you will need to make the story public which can be done by going to the Share Dialog > Publish.
The following is an example of the code for embedding a story in a webpage:
<iframe src="https://my.sharpcloud.com/html/#/story/d0577a9f-9a5a-4b5e-aa01-88707029308a/view/f73f8cdd-1eaf-41ef-b424-4494916adb76?hideHeader=both" id="myframe" scrolling="no" width=1200 height=800 frameborder="0"></iframe>
SRC = The URL for the story or specific presentation you want to display in the iframe. As a minimum, the URL must specify the story ID but can also reference a specific view that you want to be the default view that is displayed in the iframe.
Tip: Navigate to the view in the story you want to use and capture the URL from your browser address bar
Hide Header = Applying ?hideHeader=both to the end of the URL will ensure that the SharpCloud application and story headers are both hidden in the iframe.
Id = An optional field which can be chosen by the user, a string of text/numerics which provides a unique reference code which can be used to reference the specific iframe element when styling with CSS.
Scrolling = Can be set to “yes” or “no” or “auto”, which will dictate if scrollbars are active in the iframe.
Width and Height = Sets the width and height of the content inside the iframe. Recommended width and height are 1200 x 800.