Storytelling Implementation Guide

This guide answers the following ques�ons:

● What is Storytelling? ● How will I get it on my page? ● How can I incorporate my content around a Storytelling ar�cle page? ● How do I customize the Storytelling experience? ● How do my users navigate to a Storytelling page? ● How do I best maximise the SEO value of my page which has Storytelling ar�cle in it? ● What will Storytelling look like on mobile? ● Where do I go for more help?

For more informa�on, visit help.scribblelive.com and search for Storytelling.

What is Storytelling?.......................................................................................... Storytelling is a real-�me long-form content experience which weaves images, text, video, social and interac�ve content together naturally, to build emo�on and tension in a narra�ve. It includes large featured images and videos along with parallax image transi�ons - cap�va�ng readers on both desktop and mobile experiences.

How will I get it on my page? ......................................................................

Once a Storytelling experience has been created, an embed code will be generated. This embed code will need to be pasted into your CMS (content management system). Each CMS has a unique way of organizing and managing content. Most CMSs will let you to create containers that you can insert code into. This container (iframe, html container, etc.) is where you will insert - or embed - the Storytelling experience. These images illustrate how the Storytelling experience will fill the space created for it within your CMS:

In your CMS, once you have created the container and determined its size on your page, you will then need to paste the Storytelling embed code into the container. We provide two embed codes: a script version and an iframe version.

We recommend using the script code as it will scale automa�cally. If your CMS does not support script codes, you can use the iframe code. Note: The image below is an example of a CMS. Yours will differ, depending on how you add third party embed codes.

You will no�ce in the sample iframe code above that the default width is set to 100% . This allows the Storytelling experience to remain mobile responsive. The minimum height is set to 600px by default. This height controls how much space the Story takes up within the container. This value can be changed according to your preferences.

How can I incorporate my content around a Storytelling article page?................. A full width experience really highlights some of the great features of Storytelling. The example below shows a story embedded in a full width container:

However, if you want to incorporate your own content around the Storytelling experience, you may decide to embed it at par�al screen width - as in the following example:

The width of the container that you embed the Story in is determined in your CMS. You can also add blocks of content around the Storytelling container - such as text, images, or ads.

If you are unsure of how to create blocks of content in your CMS, please speak to your internal technical support team.

How do I customize the Storytelling experience?................................................. If you are using the javascript embed code for Storytelling, then your website's developer can target elements within the Story and modify them. For more informa�on, contact our Support Team at support@scribblelive.com.

How do my users navigate to a Storytelling page?................................................ Since the Storytelling experience will be embedded onto your website, your users will see the experience when they navigate to the page with the embedded Story.

How do I best maximise the SEO value of my page which has a Storytelling article in it? In order to maximise the SEO value of Storytelling, we recommend using the script code. The Storytelling script embed injects the HTML on the page, thereby a�ribu�ng the content to the parent page and making the page content available for Google to index.

What will Storytelling look like on mobile?......................................................... The following screenshot illustrates the scaling that occurs when Storytelling is viewed on a mobile device.

Where do I go for more help?......................................................................... If you need help understanding your CMS - such as crea�ng content containers, please contact your internal technical support team. If you are having any difficul�es with the Storytelling embed, please don’t hesitate to contact support@scribblelive.com . Be sure to describe the challenge and provide a screenshot so the ScribbleLive Support Team can troubleshoot effec�vely. For informa�on on crea�ng a Story, visit help.scribblelive.com .