You can embed a SharpCloud story into a webpage via the use of an iframe. There are a few recommendations when embedding a story:

  1. 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.
  2. 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.
  3. 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.

 

Example

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.

 
Frameborder= You can increase the frame border around the iframe content by increasing the number used in this part of the URL