How to create a web story? Tutorial and inspiring examples

It's decided: in the next quarter, you're going to boost your brand's communication by integrating innovative formats into your editorial line, which will catch the eye of your targets while helping you achieve your marketing objectives.

‍

And you have an idea of how to do it: create web stories, a format that has proven to convince and convert an audience fond of dynamic content.

‍

But how to create a web story?

‍

To help you design this type of content, we have developed this 7-step tutorial with examples to inspire you.

8 steps to create a peppy web story

Want to start creating web stories to boost your brand communication? We show you how it's done on JOIN Stories, the hyper-intuitive web story creation platform.

‍

Step 1: Determine the marketing objective of your web story

As with any content creation project, it's crucial to start by addressing the marketing goals you're pursuing through your web story design. 

‍

For example, would you like to... 

• Present your brand or product in a lively way?
• Promote conversion by directing your targets to a specific URL?
• Boost the natural referencing of one of your pages?
• Reassure your potential customers about your products?

‍

Once these objectives have been set, other questions will come to you spontaneously. For example, you will ask yourself what key message you should broadcast in your content, or where you want to integrate it in the end.

‍

Note all these strategic elements: they will guide the creation of your web story.

‍

Step 2: Create the script for your content

The second step is to design a script for your web story. Indeed, even if it is a very short content, it is crucial for you to have in mind a precise structure before putting your hands in creating your content. This script will also accompany you in the editing of your web story.

‍

Starting from the key message you want to convey, take the time to structure your web story into different pages. Write in your script what each page will contain in terms of media (images, videos, GIFs), text, and URL links.

‍

Think short: to be effective, your web story should not exceed half a dozen pages, or 15 seconds maximum. To check the length of your web story, you can read your script out loud at this stage.

‍

Step 3: Choose a page template

Because JOIN Stories wants to help you create truly effective web content, our design experts have created a gallery of customizable templates that you can use to create your web story. 

‍

‍

Choose among these templates the page model that will start your web story. 

‍

Of course, if you feel creative, you can start from a completely blank page, and integrate the different elements that we will present to you later by hand.

‍

Step 4: Integrate media into your web story

The whole point of a web story is to use visuals to get your key messages across.

‍

On JOIN Stories, everything is very simple: you integrate your media (still images, videos or GIFs) by drag and drop on your page.

‍

‍

Note that you can integrate these elements from... 

• Your computer itself
• Unsplash and GIPHY image and GIF banks, directly integrated to the platform
• Instagram: these can be posts made on your account, or posts from other users on which your brand has been tagged  

‍

At this stage, be careful to position the important elements of your web story in the center of the page. As JOIN web stories are designed in responsive design, a 7% margin is provided on each side, and any element integrated into this margin may be hidden during integration.

‍

Step 5: Add text

This is the time tointegrate on your page the textual elements that explain your key message. Be careful not to overload your web story with text. We generally recommend to integrate 280 characters maximum per page, which is the length of a tweet, to keep your key message clear.

‍

‍

On JOIN Stories, you can set the colors and fonts included in your graphic charter. This way, when you integrate text or shapes into your content, the graphic criteria of your brand are directly proposed to you.

‍

If you want to add a little more pep to these elements, both media and text, you can animate them. But be careful not to overdo it, to avoid the "Christmas tree" effect, which can drown the main message of your web story!

‍

Step 6: Incorporate calls to action

On JOIN Stories, you can choose between two types of call-to-actions: 

• The swipe up, as it is well known on social networks, is this button located at the bottom of the page, which opens a link or a form when the user drags the page up
• The button, which is the most visible solution, and which you can customize more finely than the swipe up

‍

‍

Include behind your call to action the URL to which you want to lead your targets.

‍

Want to make your web story even more engaging? Why not integrate a form, which appears on click, or a survey or a quiz, which allow you to collect information on your targets? All these elements are 100% customizable in terms of design, to match your graphic charter as closely as possible.

‍

‍

At this point, you have finalized the first page of your web story. Repeat the process as many times as necessary by adding pages, until you have your complete content, as you planned in your script.

‍

Step 7: Optimize the web story for SEO

If one of your goals is to work on the SEO of your website via a web story, this step is crucial to follow.

‍

Once the design of your web story is finalized, you will be able to modify all the elements that allow search engines to properly reference your content. Take the time to work well: 

• The name of your web story: it will appear in Google results
• Its slug URL
• Its description
• SEO keywords, which you can include in a dedicated field

‍

‍

If you're not pursuing an SEO goal, note that you can de-index the stories you create, so that they don't appear in Google's search results.

‍

Step 8: Broadcast your web story 

Congratulations: your web story is ready to be published. Now it's time to broadcast it to the places you want, to give it visibility. 

‍

If you want to integrate your web story to your website, on JOIN Stories, you will have to create a widget. This widget can integrate several stories at the same time, and you decide on the format it will take: 

• The Bubble format makes several stories appear in a row, in the form of bubbles, like on the Instagram stories bar.
• The iFrame format allows you to embed a single story in a web page, in vertical format.
• TheQR Code format can be interesting to integrate to a web page (or to a print support) a scannable code, which leads your target to the web story from his smartphone

‍

Then, the platform delivers anembed code that you can insert anywhere on your page to display your web story widget. If you know how to embed a YouTube video on a web page, you know how to embed a JOIN web story on your site: nothing could be easier!

‍

Note that, depending on your needs, you can also : 

• Export your content, in video or static image format, to integrate it by hand elsewhere
• Publish your web story directly on your social networks
• Integrate the link of your web story on a clickable element, anywhere: for example, if you want to integrate it in a newsletter, this option can be interesting

‍

Congratulations: you have created your first web story with JOIN! Once it is published, you can access all the statistics related to its performance (number of views, completion rate, click rate, responses to forms) from the platform... Take advantage of this to continuously optimize it!

‍

Did this tutorial make you want to get started? Ask for your demo of JOIN Stories now.

‍

Examples of web stories that will inspire you

Need some inspiration before creating your web story? Discover here 6 examples that will give you the keys to success to get started.

‍

Bouygues Telecom: when web story, emailing and SMS match

To promote its Cafeyn offer, the famous operator Bouygues Telecom has decided to integrate web stories to its emailing and SMS campaigns. A good way to dynamize these campaigns, and to integrate additional information without overloading the email or SMS sent.

‍

‍

JOIN Stories: web story and QR Code 

The QR Code that you add to your web stories is particularly interesting if you launch print communication campaigns, to lead your targets to your website.

‍

But its use does not stop there! It can be relevant to integrate this QR Code to a newsletter, or to a PowerPoint presentation, to make these communication supports more interactive.

‍

This is the approach we have taken at JOIN Stories, by integrating a QR Code at the end of the presentations we make to our clients: 

‍

‍

Blissim: the web story at the service of influencer marketing

There's nothing like revealing testimonials from other customers who are satisfied with your products to reassure a potential customer. To do this, Blissim decided to create a web story broadcasting the User Generated Content of influencers who particularly liked their beauty box, by retrieving the content created from Instagram.

‍

‍

Carrefour Belgium: e-commerce loves web stories

Carrefour's Belgian subsidiary uses web stories to promote its product catalog, as well as tips on purchasing power. The marketing department integrates them in a "Bubble" format at the top of the retailer's e-commerce site.

‍

‍

Make My Lemonade: the web story to immerse the visitor in his purchase

On its product pages, the brand Make My Lemonade always integrates well-crafted web stories, which present its products in action and give tips for choosing the right size. What to help visitors to buy in a reasoned way!

‍

‍

Trybus : the web story to find new talents

What if the web story helped you create a personalized, privileged contact with your prospects? 

‍

The example of Trybus is particularly telling in this regard. The agency's recruiters create web stories, which they send to potential candidates they want to position on job opportunities, by integrating them into a LinkedIn message or an email. A smart use case to stand out from the competition!

‍

‍

‍

With this tutorial and these examples, you are ready to start creating your web stories, to reach your marketing goals in a dynamic way.

‍

‍