The same story ad works for one room or five. Swap the scenes to what you have: the view, the breakfast, the hot tub.
HOTELS &
TRAVEL!
Eleven rooms, a harbour breakfast, a quiet January and a winter offer nobody has heard of yet. Here is how a small hotel makes the ad, the reel, the site and the link people share, without an agency, and what it still books elsewhere.
The Seaside hotel story ad template in Animate. Present fills the screen and the five scenes play in order: the welcome, an iris onto the rooms, pushes along the kitchen and the coast path, and a dissolve into the offer with its price.
WANDER!
THE EXAMPLE HOTEL
Harbour House needs a busy January
Harbour House is an example, not a customer: eleven rooms on a harbour, every one facing the water, a kitchen that does breakfast from the boats and dinner by the fire, and a coast path that starts at the gate. In summer it fills itself. In January it does not.
The owner, Morwenna, has a plan: two nights by the sea, breakfast and one dinner, for £298 instead of £420. She has a booking system already, the one that holds her rooms and takes the deposits. What she does not have is anything to tell people with: no ad, no reel, a website from 2016, and an Instagram that is mostly the dog.
This page follows her from that blank file to a sold-out offer, step by step, using real PopCraft templates. Where a feature has its own page we link to it, because this page is about the job, not the tool.
5
scenes in the story ad
9:16
1080×1920, made for stories
£298
the price, counting down
0
booking engines (on purpose)
THE CHECK-IN SHEET
What PopCraft does for a hotel, honestly
Before the fun part, the honest part. PopCraft makes the things that sell the rooms. It does not sell the rooms.
FRONT DESK · CHECK-IN SHEET
A story ad for the winter offer
YES
Seaside hotel story ad: five scenes, 9:16, MP4
A reel of the area
YES
Travel diary slideshow, cut to a CC0 song
A "getting here" animation
YES
Flight route and Location pin drop, as Lottie
A website with your rooms
YES
Hotel and B&B website: rooms, gallery, directions, Book links out
An enquiry form that saves
YES
Contact page with a working form, plus a database
A link preview image
YES
1200×630 templates; pick one as the Share image when you publish
Live availability and booking
NO
Link the Book button to the booking system you use
Taking payments
NO
Not in PopCraft. Your booking system does this.
STEP 1 · THE AD
A story ad in five scenes
The Seaside hotel story ad template is, conveniently, Morwenna's exact problem: a small seaside hotel's winter break. Five scenes at 9:16, about ten seconds: the welcome, three photo scenes (the rooms, the kitchen, the coast path) and the offer, with the old price struck and the new one counting down to it.
The template ships as "The Saltings". The hotel's name, the offer line and what is included are brand fields, so she types them once and they land in every scene. The three photo frames ship empty, waiting for her pictures; each gets a slow push-in. The iris, pushes and dissolve between scenes are already timed. Present plays it as one film; nothing is left to animate.
The Seaside hotel story ad template in Animate. Present fills the screen and the five scenes play in order: the welcome, an iris onto the rooms, pushes along the kitchen and the coast path, and a dissolve into the offer with its price.
SHOT BY SHOT
How the ad is cut
- 010:00
Welcome
The logo fades up, the hotel's name arrives letter by letter, and the offer line rises: two nights by the sea. - 020:02
Rooms
An iris opens onto the first photo. "Eleven rooms, every one facing the water", with a SLEEP tag dropping in. - 030:04
Kitchen
A push from the right. "Breakfast from the harbour, dinner by the fire." The photo drifts in, slowly. - 040:06
Walk
Another push. "The coast path starts at our gate." Same moves, so the three scenes feel like one walk. - 050:08
Book
A dissolve to the offer. "Was £420 for two", then the price counts down to £298, and the Book your nights button.
STEP 2 · STILLS TOO
Five frames, five posts
In Design, the ad is just five 1080×1920 frames in a row. That matters, because a story is gone in a day and a post is not. Each frame exports as a PNG for a carousel: the rooms, the kitchen, the walk, the offer.
The Book frame has "Was £420 for two" as plain text, and "£298" as a text with a counter on it, running from 420 to 298. Retype the first, set the counter's From and To, done. In February, when the offer becomes £268 midweek, it is a two-minute job, not a new ad. Export the MP4 for stories and reels; the trailer page has the export details.
The Seaside hotel story ad in Design: its five 1080 by 1920 frames side by side. The camera moves from the whole row to the last frame, Book, with the price and the button.
STEP 3 · THE REEL
Show the place, not just the rooms
People book a hotel for where it is. The Travel diary slideshow is a film from photos: a title card, three chapters and fifteen scenes cut on the beats of "Open Road", a guitar track made by PopCraft and released CC0, with captions, slow drifts, pushes, slides and light leaks.
It ships as a three-week trip (cities, roads, water). Morwenna makes it three days in Cornwall instead: the harbour, the path, the pub. She renames the chapters, drops her photos on the frames and exports an MP4 with the music. The guests' own trips will look like this too; there is a page for that, Spring Break.
The travel photo slideshow template, a composition of photo scenes cut to one of PopCraft's own songs. Present fills the screen and the scenes play in order with their transitions; K pauses and resumes, and Esc ends the show.
A launch post with its frame selected. Its fill opens; Image, then Photos searches “cake”, and a photo picked from the results becomes the frame’s image fill.
STEP 4 · GETTING HERE
A pin on the map, a plane in the sky
Every hotel site has a "how to find us" bit, and it is usually a grey map. The Location pin drop template is a two-second loop at 512×512: the pin drops, squashes as it lands, springs up, and a ripple spreads. Its sibling, Flight route, is a five-second hero loop: a plane flies an arc between two places and the destination pin pops as it lands.
Both export as Lottie, the small animation file that websites and apps play, so they stay crisp at any size. Neither is real geography: the route map is two stylised blobs of land, and the pin is just a pin. Put the real address right under it.
The Location pin drop Lottie template in Animate. Space plays it: the pin drops, squashes, springs up and a ripple spreads. The export button in the transport bar opens Export animation, where Lottie is picked as the format.
STEP 5 · THE SITE
A website with a Book button (that books elsewhere)
Here is where we are careful. PopCraft publishes real websites at your own address, but it has no booking engine. No availability, no rates by date, no deposits. Morwenna's booking system already does all that, and it does it well.
So the site is the shop window. She starts from the Hotel and B&B website. It ships as an eight-room inn on a dune: white clapboard, the sea rolling in behind, beach grass that sways and two gulls drifting over. Under the hero come the rooms, each with a photo frame, the bed, who it sleeps, the price from and a Book button; then a gallery, what is included, and where it is with directions. She swaps the dune for her harbour, types her rooms in, and gives every Book button a Link to her booking page, which opens in a new tab. The template takes no bookings and no payments, and it never pretends to.
For the guests who want to ask first ("is the dog allowed?"), she adds the Contact page with a working form: name, email, a topic and a message. She clicks Publish, picks an address, and under Database clicks New Neon database. From then on every enquiry is saved in her own database and listed under Submissions. Every page works on a phone, which is where nearly every guest finds her.
The Hotel and B&B website template in Design. All four widths are in view, then the desktop hero (the clapboard house on its dune with the sea behind), the rooms with a photo frame, the bed, who each sleeps, the price from and a Book button that links out, and where it is with directions.
The coming-soon page, published, with its email sign-up marked as a form and a Neon account connected. In the Publish dialog, under Database, New Neon database is clicked: a project named after the site is made in the Neon account and its database attached, and it is listed. Three visitors then sign up on the site (sent by the recording, as the site sends them). Submissions is clicked and a table shows the three, newest first, with when each was sent and its email.
STEP 6 · THE SHARE
The picture people see when you share the link
When someone pastes a link into a chat, the chat shows a picture: the link preview, 1200×630. PopCraft has a shelf of them, from Winter cabin release (a log cabin at blue dusk, which Morwenna likes a lot) to Summer heatwave and Spring bloom. They are written for software launches, so the words go; the art and the layout stay.
In the Publish dialog, choose the preview under Share image: it becomes the picture chats and social posts show beside your link. Export it as a PNG too for the places that take an image of their own: the newsletter, a post, your listing.
THE OLD WAY
An agency, a freelancer and a nephew
| THE OLD WAY | IN POPCRAFT |
|---|---|
| An agency quote for a ten-second ad | A five-scene story ad template, already timed |
| Rebooking the designer to change the price | Retype a line, set the counter's From and To |
| A reel app that crops your photos badly | A slideshow cut to a CC0 song, exported as MP4 |
| A grey embedded map | A pin that drops, as a Lottie |
| A website the nephew built in 2016 | A published, responsive site, versioned, at your address |
| Enquiries lost in a contact form plug-in | A form that saves into a database you own |
FROM ZERO
Your season in six moves
- 1
Open the story ad
Start from Seaside hotel story ad. Type the hotel's name, the offer and what is included once; drop your three photos on the frames. Motion studio. - 2
Set the price
On the Book scene, retype the "Was" line, then set From and To on the price's counter card in Animate. - 3
Export it
MP4 at 9:16 for stories and reels, or a GIF of a single scene for the newsletter. Exporting video. - 4
Make the reel
Put your walks, boats and breakfasts in Travel diary slideshow, already cut to a song. - 5
Build the site
Start from the Hotel and B&B website, point every Book button at your booking system, add the Contact page with a working form, and publish. Publish a website. - 6
Share it
Make a 1200×630 link preview and choose it as the site's Share image when you publish, and put the pin animation on the "find us" section. Interactive motion.
ALSO FOR
Not a hotel?
TOURS
THIS WAY!A walking tour or a boat trip sells the same way: a reel of the route, a pin for the meeting point, a site that links to where people book.
TRAVEL APPS
WHOOSH!The Flight route loop was made as a booking site's hero. And Wayfarer, a trip board with accounts, is a working travel app you can publish.
OPEN THE AD
Fill your quiet season
In PopCraft, click New file, search for hotel, and open the story ad. Type your name, drop your photos, set your price. Posting it everywhere? Social Media has the rest, and Publish a website covers the site.
ASKED & ANSWERED
Questions, answered
Can guests book a room on a PopCraft site?
Not through PopCraft. There is no booking engine: no availability calendar, no rates by date and no payments. Make the Book button a link to the booking system you already use (your channel manager's booking page, or wherever your rooms are listed), and let the site do the persuading.
Then what does the enquiry form do?
It sends a real message. The Contact page template has a form with a name, an email, a topic and a message. Publish the site and attach a database in the Publish dialog, and every message is saved in a database in your own Neon or Supabase account; Submissions lists them. It does not email you each one, so check it, or connect the database to something that does.
Are the photos in the story ad mine to use?
The story ad has three photo frames for your own pictures. Drop a photo on a frame and it fills it. The travel slideshow ships with CC0 photos from Wikimedia Commons, so the samples are free to use, but a hotel ad with someone else's sea is a strange ad.
What size is the story ad?
Five frames at 1080×1920 (9:16), 30 frames a second, about ten seconds in all. Export it as MP4 or WebM for stories and reels, or as a PNG of any frame for a still post.
Can I use the Lottie animations on my existing website?
Yes. Export the Flight route or the Location pin drop as Lottie, a small JSON animation format that most website builders and apps can play with a player. You can also export them as GIF or MP4.
Is there a hotel website template?
Yes: the Hotel and B&B website. A hero of the house by the sea, the rooms with a photo, the bed, who it sleeps and the price from, a gallery, what is included and how to get there, at desktop, laptop, tablet and phone. Every Book button links out to your own booking page; the site takes no bookings and no payments.
THE MANUAL, FOR THE DETAILS
WANDER! YOUR TURN.
Story ads, travel reels, route maps and a site that sends guests to book. Free to start, in your browser or on your Mac.