How do I create a web story? Inspiring tutorial and examples
It's decided: in the next quarter, you will boost your brand's communication, by integrating innovative formats into your editorial line, which catch the eye of your targets while helping you achieve your marketing goals.
And you have a small idea of how to successfully meet this challenge: create web stories, a format that has been proven to convince and convert an audience that loves dynamic content.
But how do you create a web story?
It is to help you in the design of this type of content that we have developed This tutorial in 7 simple steps, with examples to inspire you.
8 steps to create a peppy web story
Do you want to start creating web stories to boost your brand communication? We show you how it works 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 looking at The Marketing Goals You Pursue Through the Design of Your Web Story.
For example, do you want to...
- Present your brand or product vividly?
- Promote conversion, by leading your targets to a specific URL?
- Boost the natural referencing of one of your pages?
- Give reassurance to your potential customers about your products?
Once these goals are set, other questions will spontaneously come to you. You Will Ask Yourself for Example What key message should you convey in your content, or even, Where Do You Want to Integrate It In Fine.
Write down all these strategic elements: they will guide the creation of your web story.
Step 2: Create the script for your content
Second, it is a question of designing 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 very precise structure Before you put your hands into creating your content. This script will also help you set up your web story.
Starting with the key message you want to get across, so 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, a maximum of 15 seconds. To check the length of your web story, you can, at this stage, read your script out loud.
Step 3: Choose a Template Of page
Because JOIN Stories wants to help you create truly effective web content, our design experts designed all A gallery of Templates Customizable, from which you can leave To create your web story.
Choose from these Templates The page template with which your web story will start.
Of course, if you feel creative, you can start from a completely blank page, and integrate the various 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 dragging and dropping on your page.
Note that you can integrate these elements from...
- Your Computer Itself
- Unsplash and GIPHY image and GIF banks, directly integrated into the platform
- Instagram: these can be posts made on your account, or posts from other users where your brand has been tagged
At this stage, pay attention to Position the Important Elements of Your Web Story in the Center of the Page. Since JOIN web stories are designed in responsive design, a margin of 7% is provided on each side, and any element integrated into this margin may be hidden from integration.
Step 5: Add text
It's time toIntegrate textual elements that explain your key message on your page. Be careful not to overload your web story with text. We generally recommend embedding a maximum of 280 characters per page, the length of a tweet, to keep your key message crystal clear.
On JOIN Stories, you can configure the colors and fonts included in your graphic charter. Thus, when you integrate text or forms into your content, the graphic criteria of your brand are directly offered to you.
If you want to bring a little more pep to these elements, media as well as texts, you can Animate Them. But be careful not to abuse it, to avoid the “Christmas tree” effect, which can drown out the main message of your web story!
Step 6: Integrate calls to action
On JOIN Stories, you can choose between two types of Call to action :
- The Swipe up, as we know it well on social networks, is this button located at the bottom of the page, which allows you to open a link or a form when the user slides the page up
- The button, which is the most visible solution, and which you can customize more finely than the Swipe up
Integrate behind your call to action the URL to which you want to lead your targets.
Do you want to make your web story even more engaging? Why Not Integrate It A form, which appears when clicked, or A Survey or Quiz, which allow you to gather information on your targets? All these elements are 100% customizable in terms of design, to stick as closely as possible to your graphic charter.
At this stage, you have finalized the first page of your web story. Repeat the process as many times as needed by adding more pages until you get your complete content, as 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 through a web story, this step is crucial to follow.
Once the design of your web story is finalized, you can 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
- Son Slug URL
- Her description
- SEO keywords, which you can include in a field dedicated to this purpose
If you're not achieving an SEO goal, note that you can deindex stories you create so they don't appear in Google search results.
Step 8: Broadcast your web story
Congratulations: your web story is ready to be published. It is now a question of broadcasting it to the places you want, to give it visibility.
If you want to integrate your web story into your website, on JOIN Stories, you will need to create a widget. It can integrate several stories at the same time, and you decide what format it will take:
- The Bubble Format Make several stories appear in a row, in the form of bubbles, like on the Instagram story bar
- The iFrame Format allows you to integrate a single story into a web page, in a vertical format
- The QR code format can be interesting to integrate into a web page (or a medium). Print) a scannable code, which leads your target to the web story from their smartphone
Then, the platform delivers you An integration code (Embed code) That You Can Insert Anywhere on Your Page, to display your web story widget. If you know how to integrate a YouTube video into a web page, you therefore know how to integrate a JOIN web story into 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 into a newsletter, this option can be interesting
Congratulations: you created your first web story with JOIN! Once it is broadcast, you can access from the platform all the statistics related to its performance (number of views, completion rate, click rate, responses to forms)... Take the opportunity to optimize it continuously!
Did this tutorial make you want to get started? Request your JOIN Stories demo now.
Examples of Web Stories That Will Inspire You
Need 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 decided to integrate web stories into its emailing and SMS campaigns. A good way to boost 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 are launching communication campaigns. Print, to lead your targets to your website.
But its use does not end there! It may be appropriate to integrate this QR Code into a newsletter, or into a PowerPoint presentation, to make these communication materials 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 customers:
Blissim: The Web Story at the Service of Influence Marketing
There is nothing better to reassure a potential customer than to reveal testimonials from other customers satisfied with your products. To do this, Blissim decided to create a web story broadcasting the User Generated Content influencers who particularly liked their beauty box, by retrieving content created from Instagram.
Carrefour Belgium: e-commerce loves web stories
The Belgian subsidiary of Carrefour uses web stories to promote its product catalog, as well as tips in terms of purchasing power. The marketing department integrates them in the “Bubble” format at the top of the distributor's e-commerce site page.
Make My Lemonade: The Web Story to Immerse the Visitor in Their Purchase
On its product sheets, the clothing brand Make My Lemonade always includes well-crafted web stories, which present its products in action and give tips for choosing the right size. Enough to Help Visitors Buy in a Rational Way!
Trybus: The Web Story to Find New Talent
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!
Thanks to this tutorial and these examples, you are ready to start creating your web stories, to achieve your marketing goals dynamically.
{{cta}}
.png)