Sådan bygger du dine egne beregnere i HubSpot og sparer penge på dyre softwares

Hvis du har interaktive elementer på din hjemmeside, kender du det sikkert. Uanset om det er en beregner, quiz eller konfigurator, skal der en software til at skabe og drive den. Og den software er ofte bygget på en licensbaseret aftale, der betyder, at dit artefakt reelt set blot er noget, du lejer.

Hvis du fx bruger LeadDoubler, ConvertCalculator, Typeform eller noget helt fjerde, viser det sig ofte at være dyrt, lidt stift og ikke 100 procent tilpasset, som I gerne vil have det. Sådan har det i hvert fald været hos os her i Itch. 

Derfor har vi droppet flere af de licensbaserede softwares, da vi langt hen ad vejen kan lave en bedre løsning selv. Og det gælder faktisk også for vores kunder.

I stedet bygger vi nu vores egne moduler i HubSpot. Det gælder prisberegnere, konfiguratorer og quizzer, som bliver udviklet og ejet af os selv. Det medfører ikke kun en besparelse på sigt, det giver os også  større frihed til at tilpasse, styre og genbruge de interaktive elementer, som vi ønsker det.

Faktisk har det sparet os cirka 20.000 kroner om året at konvertere bare to softwares til custom-udviklede moduler.

Det fedeste er faktisk, at du ikke behøver at være Aarhusmester i kodning. Du kan sagtens løse de nørdede processer med hjælp fra diverse AI-værktøjer helt uden at være uddannet webudvikler. Men det skal vi nok vende tilbage til.

1. Problemer, der går igen hos os selv og vores kunder
2. Hvornår giver det mening at bygge selv?
3. Skræddersyede HubSpot-moduler med Claude som udvikler
4. Eksempel: Vores inbound marketing-gapanalyse
5. FAQ

Problemer, der går igen hos os selv og vores kunder

Både i vores egne processer og hos flere af vores kunder begyndte vi at se et mønster. Det var ikke som sådan ét stort problem, men en række gentagne benspænd som tilsammen gjorde det sværere at arbejde effektivt med de interaktive artefakter i vores marketing og salgsunderstøttende arbejde.

Her er nogle af de udfordringer, der gik igen:

• Licensomkostninger
  Mange af de små værktøjer og softwares, vi brugte, virkede overkommelige hver for sig. Men når vi lagde omkostningerne sammen, begyndte det at fylde i budgettet. Det blev især tydeligt, når vi så på omkostninger over flere år.
  
  
• Begrænset funktionalitet 
  Standardværktøjer er ofte lavet til det brede marked. De dækker det mest almindelige behov, men når vi selv eller vores kunder har brug for noget lidt mere skræddersyet, stødte vi hurtigt på begrænsninger. Og B2B-virksomheder har ofte brug for mere end standardløsninger.
  
  
• Integrationer der driller
  Eksterne løsninger spiller ikke altid gnidningsfrit sammen med HubSpot og dit CRM. Det er ofte lig med manuelle processer, data der ikke synkroniserer, eller forretningslogik, der bliver svær at automatisere. Derudover er de licensbaserede løsninger embedded på siden, hvilket betyder, at du ikke kan rette i det direkte i HubSpot.

Det var summen af de her udfordringer, der gjorde, at vi traf beslutningen om at bygge selv.

Læs også: AI Visibility og GEO: Bliv fundet i ChatGPT, Gemini og Claude

Hvornår giver det mening at bygge selv?

Når du beslutter dig for at udvikle dine egne beregnere, kræver det selvfølgelig lidt mere arbejde i starten. Men for os og flere af vores kunder har det vist sig at give både økonomisk og strategisk værdi.

Her er et par gode grunde til, at vi har valgt at droppe vores licensværktøjer og bygge dem selv:

1. Totalomkostninger over tid

Mange bække små: Et værktøj til 500 kroner om måneden løber op i 6.000 kroner på et år. Har du så et par stykker af dem, løber det hurtigt op over tid.

Selvfølgelig kræver omlægningen i begyndelsen en investering i enten tid eller mønt, men til gengæld ejer du løsningen, og du kan bruge den igen og igen – og tilpasse den, hvis det bliver nødvendigt.

2. Fleksibilitet

Du kan bygge præcis dét, vi har brug for. Løsningen kan tilpasses brand, funktionalitet og brugeroplevelse. Og vi slipper for at gå på kompromis med standardfunktioner. Derudover kan du let tilpasse beregnerne, hvis de optræder på flere forskellige sider.

3. Kontrol over data

Du styrer selv hvor data gemmes, og hvordan det bruges. Det gør det nemmere at skabe en optimal integration til HubSpot og CRM. Når det hele er lavet i HubSpot, bliver det lettere fx at lave dataopsamling gennem properties.

4. Sporbarhed og performance

Egne moduler giver dig mulighed for at tracke brugerens adfærd ned til mindste detalje. Du kan koble handlinger direkte til CRM og bruge indsigten til at forbedre din kunderejse og konverteringerne.

Skræddersyede HubSpot-moduler med Claude som udvikler

Nu kommer vi til den sjove del. Den del, hvor en ikke-udviklertype som mig, skal forsøge at forklare en (formentlig) ikke-udviklertype som dig, hvordan du koder custom modules i HubSpot.

Det er vigtigt at skrive, at du selvfølgelig godt kan lave dine egne beregnere, uanset om du bruger HubSpot som CMS-system eller ej. Men en klar fordel i HubSpot er, at du kan redigere modulernes layout direkte i CMS-systemet, hvor du fx med et Umbraco-site skal embedde modulet på siden og redigere det backend.

Nå, tilbage til dét, det handler om: udviklingen af custom modules i HubSpot. Det hele foregår faktisk i Claude, hvor jeg gennem simple prompts i artifact-funktionen bygger mine calculators. Er du i tvivl om hvilken artifact category, du skal vælge til dit projekt, kan du altid vælge Start from scratch.

I stedet for at formulere en teknisk kravspecifikation eller forsøge at beskrive ønsker i udvikler-jargon, starter jeg blot med at fortælle Claude, hvad jeg gerne vil have, at beregneren skal kunne.

Læs også: Sådan kan du bruge AI i din marketing

For eksemplets skyld har jeg brugt små 10 minutter på at lave en helt simpel dummy-quiz:

Hvis du spørger mig, er det absolut fedeste ved den her tilgang, at du ikke behøver at tænke i kode. Du tænker i forretningslogik og brugeroplevelse, mens Claude oversætter dine behov til en funktionel kode.

Derfor behøver dialogen med Claude ikke at være synderlig teknisk. I udklippene herunder, kan du se min tilgang og mit simple prompt:

1) Da dette blot skulle være en hurtiglavet quiz, der kunne bruges til eksempel, har jeg hverken specificeret fonttype, fontstørrelse eller farvekoder. I stedet har jeg vedlagt i et screenshot af vores egen hjemmeside som reference.

2) Claude opsummere her dens forståelse af mit prompt. Som det fremgår foreslår den selv et layout og en logik (en ret simpel en af slagsen. I know).

3) I den øverste fil ligger den komplette kode til de fem filer, der udgør HubSpot-modulet (meta.json, fields.json, module.html, module.css, module.js). Den skal indsættes i Powershell, hvorefter kommandoen hs upload vibe-coding-quiz.module vibe-coding-quiz også sættes ind i Powershell. 

Jeg har på næste slide vedlagt et udsnit af kodefilen HubSpot Quiz Module - Deploy Script.

4) Her er et udsnit af den kode, jeg indsætter i Powershell. Den indeholder både koden til de fem føromtalte filtyper samt instruktioner til Powershell om at oprette filerne lokalt på min computer.

Du bestemmer selv kompleksiteten 

Ovenstående quiz er et meget forsimplet eksempel på de løsninger, vi laver i HubSpot. Ofte er der mange flere spørgsmål med mange flere svarmuligheder, variabler, værdier og kombinationer. Det betyder, at både opbygning, layout og ikke mindst logikken bag outputtet bliver væsentlig mere kompliceret at jonglere med.

Derudover ønsker vi og vores kunder i de fleste tilfælde at indbygge en HubSpot-formular, der snakker sammen med CRM'et, hvilket lægger et ekstra lag på processen.

Bruger du en formular, er det muligt at gemme værdierne fra de afgivne svar som properties i HubSpot, så quizzen på den måde beriger kontakterne i dit CRM med informationer. 

Eksempel: Vores inbound marketing-gapanalyse

Den seneste beregner, vi har lavet til vores egen biks, er Inbound-væksttesten. Det er et interaktivt værktøj, der hjælper vores kunder med at spotte forskellen mellem deres nuværende marketingindsats og det, deres forretning faktisk har brug for.

Væksttesten vurderer ni centrale marketingdiscipliner ud fra to parametre:

1. Hvor godt kunden arbejder med disciplinen i dag
2. Hvor vigtig, disciplinen er for deres forretning.

Når de to ting holdes op mod hinanden, får man en tydelig gapanalyse, som viser, hvor det vil give mest værdi at sætte ind.

Visualiseringen sker blandt andet via et radardiagram, som du kan se på billedet nedenfor.

Diagrammet genereres med Chart.js, hvor både virksomhedernes nuværende niveau (i grøn) og virksomhedernes strategiske prioritering (i rød) vises på samme graf, så sammenhængen bliver tydelig i ét visuelt overblik.

Samtidig bygges en detaljeret scoreliste dynamisk med HTML og CSS, hvor gap-værdierne oplistes, så de største potentialer bliver fremhævet:

Tag testen her, og få et overblik over de mest relevante optimeringsmuligheder i din inbound-strategi.

Teknisk implementering

Quizzen er bygget som et custom HubSpot module med følgende komponenter:

Multistep-formular: Bygget med HubL og JavaScript, hvor brugeren først besvarer spørgsmål om nuværende niveau, derefter om vigtighed. En progress-bar viser fremdrift gennem de to sektioner.

Real-time beregninger: JavaScript-funktioner beregner gap-værdier for hver af de ni discipliner. Disse scores gemmes og bruges til at generere visualiseringerne.

CRM-integration: Via HubSpots Forms API sendes alle svar til kontakten i CRM'et. Hver disciplins score gemmes som separate contact properties, så data kan bruges til segmentering og reporting.

For os som bureau fungerer quizzen som et strategisk værktøj til at facilitere bedre samtaler med vores kunder. I stedet for at gætte os til, hvor der er flest udfordringer, får vi konkret, datadrevet indsigt i kundens egen vurdering af deres modenhed og prioriteter.

Væksttesten er et værktøj, vi løbende vil modificere og anvende langt ud i fremtiden. Derfor giver det rigtig god mening for os, at vi selv ejer den, frem for at vi skal betale for softwarelicensen år efter år.

Vil du vide mere? Ræk ud til os her.