Casita Amarilla är ett timhotell för vuxna par på Carrer de Pàdua 83 i Barcelona, med rum från 30 € och bokning per telefon. Den gamla WordPress-webbplatsen dolde praktisk information i en åldrad skrivbordslayout. Det passade dåligt för någon som jämför priser eller kontrollerar tillgänglighet ute på stan. Vi ersatte den först med förrenderade sidor och utvecklade senare leveransen till en serverrenderad React-webbplats på Netlify. Den nuvarande produkten har rutter på 20 språk, visar priser och öppettider tydligt och håller bokningssamtalet inom räckhåll genom hela besöket.
Kunduppdrag. Clutch Developer byggde och driver webbplatsen, publiceringsflödet, marknadsmätningen och rapportverktygen. Hotellet och dess kundservice tillhör Casita Amarilla.
Vad vi levererade
- En webbplats på 20 språk. Spanska, katalanska och engelska finns tillsammans med 17 andra språkversioner, var och en på en egen URL-sökväg, med språkidentifiering, ett bestående besökarval, lokaliserad metadata, hreflang-länkar och en genererad sitemap. Den nuvarande applikationen renderar fullständig HTML på servern genom TanStack Start och Netlify.
- Ett telefoncentrerat bokningsflöde. Ständigt tillgängliga samtalsknappar, tydliga öppettider, rumssidor, vägbeskrivning, vanliga frågor och en prisvy håller informationen som behövs före samtalet nära bokningsknappen. Telefonnumret är en riktig
tel:-länk, inte dekorativ text. - En kontrollerad WordPress-migrering. Omdirigeringsregler för gamla sidor, inlägg och mediefiler leder till aktiva mål, medan kanoniska URL:er och sitemap-kontroller skyddar flytten från en etablerad domän till den nya språkstrukturen.
- Samtyckesstyrd mätning. Taggar för GA4 och Google Ads laddas först efter samtycke. Webbplatsen registrerar definierade händelser för samtalsklick, formulär, språkbyten och bloggläsning och håller även egna aggregerade räknare utan att lagra IP-adress, user agent eller besökar-ID.
- Versionsstyrt innehåll och rapportering. AI-stödda flöden hjälper till att förbereda och granska flerspråkig bloggtext, men inläggen levereras fortfarande som versionsstyrd källkod genom det vanliga bygget. Privata rapporter och en dokumenterad veckorutin samlar webb-, sök-, annons- och samtalsdata i en operativ vy.
Designa kring samtalet, inte kring sidvisningar
Den viktigaste konverteringen är ett telefonsamtal som bekräftar tillgängligheten. Det ger gränssnittet en strikt prioritetsordning. Före samtalet behöver besökaren aktuellt pris, öppettider, adress och tillräcklig rumsinformation för att besluta. Därefter ska webbplatsen kliva åt sidan. Bokningsåtgärden finns därför i sidhuvudet och i en ständigt synlig mobil kontroll. Samma mål återanvänds på start-, pris-, rums-, läges-, FAQ- och artikelsidor.
Priserna var den tätaste delen av flödet. De beror på vistelsens längd och veckodag, medan öppettiderna varierar under veckan. Implementationen håller dessa uppgifter centralt, räknar ut aktuell prisnivå i Barcelona-tid och visar en kompakt sammanfattning på små skärmar före hela tabellen. Särskilda kontroller jämför prissammanfattningar, aktuell status, öppettider och bokningslänkar så att en textändring inte obemärkt lämnar olika villkor på två sidor. Lägesflödet gör samma praktiska arbete: information om kollektivtrafik och parkering leder tillbaka till samtalet.
Publicering och mätning är delar av produkten
Bloggen är en versionsstyrd funktion och inte ett separat publiceringssystem. AI-stödda verktyg kan utforma eller översätta en artikel, men den färdiga texten ligger bredvid applikationen, passerar språk- och omfattningskontroller och levereras med samma bygge som priser och rumssidor. Då kan ett inlägg granskas före publicering, och länkar, metadata, datum och översatta varianter förblir kopplade till koden som renderar dem. Det hindrar också ett automatiserat skrivverktyg från att få en direkt och ogenomskinlig väg till produktion.
Tjugo språk skapar ett större underhållsproblem än en språkväljare antyder. En rutt kan ha rätt språkkod medan ett reservstycke, ett FAQ-svar eller en bildbeskrivning fortfarande är på spanska eller engelska. Leveransen omfattar därför genererade språkkataloger och kontroller av bloggomfattning, omdirigeringar, språkidentifiering och paketinnehåll. Det synliga resultatet är enkelt: besökaren väljer språk och valet består. Den viktiga begränsningen är att alla gemensamma uppgifter måste hållas samstämmiga när priser, öppettider eller bokningsinstruktioner ändras.
Mätningen följer samma regel. Google-taggar är avstängda tills besökaren godkänner analys, och därefter skiljer namngivna händelser ett samtalsklick från ett inskickat formulär eller en färdigläst artikel. Egna aggregerade räknare täcker grundläggande sid- och åtgärdssummor utan att identifiera en besökare. Rapportlagret kombinerar signalerna med Search Console, Google Ads och historiska serverdata och dokumenterar när datamängder inte kan jämföras direkt. En veckovis arbetslista omvandlar underlaget till granskningsarbete utan att presentera ett annonsklick som en bekräftad bokning.
Omfattning och projektroll
Den färdiga omfattningen är större än en omdesign: offentliga sidor, 20 språkrutter, WordPress-migrering, samtals- och formulärflöden, samtyckeshantering, bloggpublicering, analysinstrumentering och privat rapportering. Kontaktrutten skiljer en bokning från en allmän fråga och kan leverera meddelandet genom en konfigurerad e-postleverantör. Om serverns e-post inte är tillgänglig förbereder webbläsaren samma begäran i besökarens e-postapp. Systemet ersätter inte receptionen och avgör inte om ett rum är ledigt. Webbplatsen förbereder besökaren för samtalet, tar rätt sammanhang till det ögonblicket och mäter de digitala steg som kan mätas. Casita Amarilla ansvarar fortfarande för priser, tillgänglighet, kundservice och vistelsen.
När den operativa ytan växte gick projektet från en snabb förrenderad lansering till en serverrenderad applikation. Produktmålet bestod: tydlig information och en kort väg till bokningssamtalet. Webbplatser täcker det offentliga bygget och migreringen; Automation och integrationer täcker de kontrollerade innehålls- och rapportflödena runt det.
Belägg och begränsningar
De sparade mobilbilderna visar startsidan, priserna, rummen och bloggen; på den aktiva webbplatsen går det att granska språkvägarna och bokningslänkarna. Det styrker den offentliga implementationen och det publicerade innehållet, inte samtalsvolym, bokningskonvertering eller beläggning. Casita Amarilla ansvarar för tillgänglighet, bokningar och kundservice.