Initial Web SDK Setup
Web Application Frameworks
This walkthrough shows how to add Storyly to your web application and show your first story in it.
Before you begin
Please login into Storyly Dashboard and get your instance token. You can get your token from the Storyly Dashboard -> Settings -> App Settings
Basic Installation
If you do not use any framework you can simply import and init Storyly by copying below lines to your web app, please remember to replace <YOUR_TOKEN_HERE> with your own.
<script custom-element="storyly-web" src="https://web-story.storyly.io/v2/storyly-web.js"></script>
<storyly-web></storyly-web>
<script>
const storylyWeb = document.querySelector('storyly-web');
storylyWeb.init({
token: '<YOUR_TOKEN_HERE>',
});
</script>
Just hit the run. Now, you should be able to enjoy Storyly
!


Using Multiple Instances at the Same Page
If you'd like to place several instances at the same page, please make sure that you give a different ID to the other instance. Then, without adding the script again, you can use lines given below:
<storyly-web id="otherInstance"></storyly-web>
<script>
otherInstance.init({
token: '<YOUR_TOKEN_HERE>',
});
</script>
Layout
There are 2 different Layouts that you can choose in between.
The 1st option is the Modern Layout:


In order to use the Modern Layout, set the layout
parameter as:
storylyWeb.init({
...
layout: 'modern',
props: {...},
});
Tip
Modern Layout is the default layout. If you do not set this parameter, you’ll have the Modern Layout by default.
The 2nd option is the Classic Layout:


In order to use the Classic Layout, set the layout
parameter as:
storylyWeb.init({
...
layout: 'classic',
props: {...},
});
React
First of all you need to insert storyly-web.js inside your html body,
<script custom-element="storyly-web" src="https://web-story.storyly.io/v2/storyly-web.js"></script>
and then you need to put below tag to the page where you want to show your stories.
<storyly-web ref={storylyRef} />
Finally you can initialize Storyly in your useLayoutEffect lifecycle event. Please remember to replace <YOUR_TOKEN_HERE> with your own.
const storylyRef = useRef();
useLayoutEffect(() => {
storylyRef.current.init({
token: '<YOUR_TOKEN_HERE>',
});
}, []);
Vue
First of all you need to insert storyly-web.js inside your html body,
<script custom-element="storyly-web" src="https://web-story.storyly.io/v2/storyly-web.js"></script>
and then you need to put below tag to the page where you want to show your stories.
<storyly-web ref="storylyWeb"></storyly-web>
Finally you can initialize Storyly in your mounted lifecycle event. Please remember to replace <YOUR_TOKEN_HERE> with your own.
<script>
export default {
mounted() {
this.$refs.storylyWeb.init({
token: '<YOUR_TOKEN_HERE>',
});
}
}
</script>
Angular
Storyly is implemented as a web component so you need to enable custom elements schema in your configuration.
@NgModule({
...
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
Then you need to insert storyly-web.js inside your html body,
<script custom-element="storyly-web" src="https://web-story.storyly.io/v2/storyly-web.js"></script>
and then you need to put below tag to the page where you want to show your stories.
<storyly-web #storylyweb></storyly-web>
As the last step you need to initialize your component. Please remember to replace <YOUR_TOKEN_HERE> with your own.
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
@Component({
...
})
export class AppComponent implements AfterViewInit{
@ViewChild("storylyweb") storylyWebDom!: ElementRef;
ngAfterViewInit(){
this.storylyWebDom.nativeElement.init({
token: '<YOUR_TOKEN_HERE>',
});
}
}
Warning
If you can't see Storyly in your website, please check that your token is correct. For more details please check console logs.
Marketing Tools
This walkthrough shows how to add Storyly to your marketing tool and show your first story in it.
Before you begin
Please login into Storyly Dashboard and get your instance token. You can get your token from the Storyly Dashboard -> Settings -> App Settings
Google Tag Manager
You can import and init Storyly by copying below lines to Google Tag Manager, please remember to replace <YOUR_TOKEN_HERE> with your own.
<script>
(function (targetClass) {
var storylyScript = document.createElement("script");
storylyScript.setAttribute("custom-element", "storyly-web");
storylyScript.setAttribute(
"src",
"https://web-story.storyly.io/v2/storyly-web.js"
);
document.body.appendChild(storylyScript);
var storylyTag = document.createElement("storyly-web");
var heading = document.querySelector("." + targetClass);
if (heading) {
heading.parentElement.insertBefore(
storylyTag,
heading.previousSibling
);
}
storylyScript.onload = function () {
storylyTag.init({
token: "<YOUR_TOKEN_HERE>",
});
};
})("CLASS_NAME");
</script>
Tip
Storyly will be positioned before the section named CLASS_NAME. Please do not forget to put correct class name into this field.
Warning
If you can't see Storyly in your website, please check that your token is correct. For more details please check console logs.
Website Builders
This walkthrough shows how to add Storyly to your website builder and show your first story in it.
Before you begin
Please login into Storyly Dashboard and get your instance token. You can get your token from the Storyly Dashboard -> Settings -> App Settings
Shopify
The Custom HTML section allows you to add additional code to your homepage.
- From your Shopify admin, go to Online Store > Themes.


- Find the theme you want to edit, and then click Actions > Edit code.


- In the Sections directory, click Add a new section with the name
section-custom-html
.


- You can import and init Storyly by copying below lines to custom html section, please remember to replace <YOUR_TOKEN_HERE> with your own.
<script custom-element="storyly-web" src="https://web-story.storyly.io/v2/storyly-web.js"></script>
<storyly-web></storyly-web>
<script>
const storylyWeb = document.querySelector('storyly-web');
storylyWeb.init({
token: '<YOUR_TOKEN_HERE>',
});
</script>
{% schema %}
{
"name": "Storyly Embed",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type":"textarea",
"id": "custom_html",
"label": "HTML"
}
],
"presets": [
{
"name": "Custom HTML",
"category": "Web Stories",
"settings": {
}
}
]
}
{% endschema %}
- Click Save.
Warning
If you can't see Storyly in your website, please check that your token is correct. For more details please check console logs.
Embed Code
This section shows how to use Embed Code feature of Storyly.
Here is an example code that you'll get with the Embed to website option. In the recipe, you can see how to modify the code as well.
For both Embed options, you can also check out our how-to guide.
Updated about 1 month ago