🔥 Slechts 5 minuten om de weergave te wijzigen.

Hoe HubSpot aan te sluiten op Webflow om een volledige marketingautomatisering te maken.

Zo lang, wil je lezen?

Mooie website ... Maar klanten zijn helemaal verloren? Problemen die Web People Webflow en het marketingteam echt ontmoeten.

Heb je ooit hoofdpijn gehad met deze situatie? U hebt een website die op de webflow is ontworpen, prachtig, moderne, snelle lading. Maar wanneer ze daadwerkelijk worden gebruikt, vond dat ... klantinformatie die het formulier op internet opvult, is verspreid! Het marketingteam moet wachten op de handgeschakelde informatie een voor een om het in HubSpot te plaatsen, het verkoopteam kent de oorsprong van elke lead niet. In het bijzonder was lood in de lucht in de lucht gevallen. Geen volgt -Up (verzorgen) die zou moeten zijn ... als je knikt laat zien dat je bij de juiste plaats bent gekomen.

Prompt voor illustraties: afbeeldingen die de prikkelbaarheid van het marketingteam tonen dat met verspreide informatie moet werken. Een kant is een prachtig webflow -scherm. De andere kant is een rommelige Excel -tafel en het loodpictogram is verdwenen.

Waarom praten Webflow en HubSpot niet met elkaar? Ontgrendel de reden dat de gegevens niet zijn verbonden

Veel mensen begrijpen vaak verkeerd dat alleen het gebruik van de beste 2 beste tools (WebFlow voor web en HubSpot voor marketing) en alles zal automatisch samenwerken. Maar in werkelijkheid zijn beide platforms als "eiland". Webflow is een eiland van flexibel en mooi ontwerp. HubSpot is het eiland van informatie en automatische automatische systemen zonder de juiste "brug" die deze twee eilanden verbindt. Informatie kan niet naar elkaar reizen. De belangrijkste reden is van:

  • Het systeem dat volledig gescheiden is: Webflow beheert het huis (website en formulieren), terwijl de HubSpot de achtertuin (CRM & Automation) op natuurlijke wijze beheert, wordt het niet gemaakt om in één klik verbinding te maken.
  • Technisch complex: veel mensen denken dat het verbinden van het systeem moeilijk is. Moet een programmeur gebruiken om een complexe code te schrijven, daarmee kiezen om handmatig te werken, omdat deze eenvoudiger is
  • Ik weet niet of er een gemakkelijkere manier is: het goede nieuws is dat we de code niet altijd hoeven te schrijven! Er zijn tools en methoden die helpen deze "brug" gemakkelijk te maken dan ik denk.

Prompt voor illustraties: 2 eilandenkaarten genaamd "Webflow Island" en "Hubspot Island" met grote ruimtes gescheiden tussen hen. Brengt het systeem dat nog niet is aangesloten

Vertrek ... beschadigd dan je denkt! De impact wanneer uw marketinggegevens "silo" zijn

Het toestaan van klantinformatie van de Web WebFlow en het marketingautomatiseringssysteem van de HubSpot afzonderlijk, niet alleen om het team moeer te maken. Maar het heeft direct invloed op het bedrijf dat u misschien niet verwacht:

  • Lost Business Opportunities (Lost Leads): lead die het formulier invullen mogelijk niet worden gevolgd. Of volg te laat totdat de klanten naar de concurrenten gaan
  • Marketing zonder richting: u weet niet welk artikelleider geïnteresseerd is in lezen. Of kijk welke pagina van het product op internet voordat u contact opneemt, waardoor de lead wordt verzonden of een e -mail verzenden om te worden gezaaid.
  • Kan ROI niet meten: hoeveel besteedt u geld uit aan advertenties? Maar kan niet duidelijk zeggen hoe kwaliteit de leiding is geweest en welke campagne de beste resultaten zijn omdat de klantreisgegevens ontbreken?
  • Slechte klantervaring: denk dat klanten de vorm van demo invullen, maar in plaats daarvan een e -mail hebben ontvangen om algemene artikelen aan te bevelen die niet gerelateerd zijn aan wat hij geïnteresseerd is, is een slechte relatie. Het creëren van een goede ervaring vanaf het begin is erg belangrijk. Vooral in de procesklant Onboarding

Prompt voor illustraties: een groot lekkende waterpijpafbeelding met een loodvormige pictogram en geld stroomt uit dat lek. Overbrengen het verlies van kansen en budgetten

Er is een oplossing! 2 Hoofdmethoden die WebFlow verbinden met HubSpot (en hoe te beginnen)

Het is tijd om een "brug" te bouwen die deze twee eilanden verbindt! Webflow verbinden met de meest populaire en effectieve HubSpot. Er zijn 2 hoofdmethoden, die elk verschillende voordelen hebben:

  1. Methode 1: Directe integratie - Aanbevolen om te beginnen met deze methode!
    Dit is de gemakkelijkste en krachtigste manier om de "trackingcode" van HubSpot te brengen om begraven te worden op uw WebFlow -website en "HubSpot Forms" te gebruiken in plaats van het originele Webflow -formulier. Hierdoor kan HubSpot het gedrag van iedereen op uw website in detail volgen. En alle informatie die door het formulier wordt ingevuld, wordt naar de echte HubSpot CRM verzonden
  2. Methode 2: Middleware -integratie.
    Deze methode is om webflow -formulieren zoals gewoonlijk te gebruiken, maar met behulp van een medium zoals Zapier of de Integromat) om informatie van WebFlow naar HubSpot te verzenden. Met de WebFlow -tools, maar moet met veel stappen worden uitgewisseld en kunnen extra kosten van de intermediair hebben.

Suggesties: voor 90% van het bedrijf moet het beginnen met methode 1 (directe verbinding) omdat het de diepste gegevens biedt (volledige klantreizen tracking). Gemakkelijk in te stellen en stelt u in staat om de kracht van HubSpot tot het maximum te gebruiken.

Prompt voor illustraties: Diagramafbeelding Vergelijk 2 methoden. De eerste methode is een rechte lijn van de WebFlow naar HubSpot (directe integratie) en de tweede methode heeft een Zapier -logo in het midden tussen WebFlow en HubSpot (middleware -integratie).

Voorbeeld van succes: wanneer het B2B -technologiebedrijf de kwaliteitspronger met 250% verhoogt

Om duidelijker te zijn, wil ik een voorbeeld geven van een technologiebedrijf dat B2B -softwareservices biedt. Ze hebben een uitstekende contenthub op WebFlow en bieden consistente klantkennis, maar het probleem is "weet niet wie lees wat" en de leiding die allemaal hetzelfde is.

Voordat u verbinding maakt: het verkoopteam ontving alleen de e -mailnaam en het telefoonnummer. "Verzoek een offerte" op de Webflow -website zonder te weten dat lead het artikel heeft gelezen. "Vergelijking van functies" of heb je ooit eerder de "case study" ingevoerd? Maakt praten moeilijk

Na de WebFlow -verbinding met HubSpot: ze begraven de trackingcode en schakelden over naar HubSpot -formulieren zodra deze werd gedaan. Het wonder gebeurde! Wanneer een nieuwe lead het verkoopteam binnenkwam, kunt u alle "tijdlijnactiviteit" van die lead in HubSpot zien.

  • "Oh! Khun A komt van deze Facebook Cam -campagne."
  • "Hij is vooral geïnteresseerd in het artikel voor geautomatiseerde workflow. Lees 3 artikelen."
  • "Hij drukte ook om onze prijspagina 2 keer te zien!"

Resultaten: het verkoopteam kan het gesprek rechtstreeks openen. ("Ik zie dat u vooral geïnteresseerd bent in onze automatisering ...") geeft klanten het gevoel dat het bedrijf zijn probleem echt begrijpt, de conversieratio van lead naar مرحله demo met 25% en kan sneller worden gesloten. Omdat ze zich kunnen concentreren op de voorsprong van de "ja" kwaliteit

Prompt voor illustraties: HubSpot -scherm met de tijdlijnactiviteit van een klant Er zijn verschillende activiteiten, zoals "bekeken pagina: /blog /x", "bekeken pagina: /prijzen", "FULLED FORM: Demo Request".

Houd je hand vast! HubSpot verbinden met stapsgewijze webflow (kan onmiddellijk worden gebruikt).

Klaar om het al te doen? Laten we eens kijken hoe u rechtstreeks verbinding kunt maken (directe integratie), wat de beste manier is om grondig te zijn. Kan zeggen dat het gemakkelijker is dan u denkt!

Stap 1: Zoeken en kopiëren HubSpot -trackingcode

  1. Log in op uw HubSpot -account
  2. Klik op het pictogram Instellingen (instellingen) in de rechterbovenhoek.
  3. In het linkermenu naar Tracking & Analytics> Trackingcode
  4. U ziet het codebox met de naam "Emped Code". Kopieer alle code in dat vak is opgeslagen.

Stap 2: Neem de trackingcode om in te sluiten in de webflow.

  1. Open uw WebFlow -project en ga naar Site -instellingen (niet ontwerper).
  2. tabblad Aangepaste code
  3. in het kanaal met de naam Hoofdcode de code die wordt gekopieerd van HubSpot.
  4. Druk op Save -wijzigingen en publiceer uw website opnieuw. Voltooide de installatie van volgers!

Stap 3: Maak een vorm in HubSpot.

  1. Terug naar HubSpot naar de marketing> Lead Capture> Formulieren.
  2. Maak een nieuw formulier (maak formulier maken) en kies het type ingebedde formulier.
  3. Ontwerp het formulier van het gewenste plaatsen, zoals voornaam, achternaam, e-mail en kan een berichtenkanaal hebben.
  4. Pas de tekst aan op de knop Call-to -ction om interessant te zijn, zoals "een gratis demo krijgen" of "e-book downloaden"
  5. Wanneer het ontwerp is voltooid, klikt u op de Update of publiceren in de rechterbovenhoek.

Stap 4: Breng het HubSpot -formulier mee om in te sluiten in de WebFlow -ontwerper.

  1. Klik op het formulier van de HubSpot op het Delen en kopieer de "Embedcode" van het formulier.
  2. Ga terug naar de WebFlow -ontwerper. Open uw plicht. U wilt een formulier plaatsen (zoals contact ons).
  3. Sleep vanuit het paneel Elements ( + +) het gereedschap dat genoemd .
  4. Er zal een venster openen. Neem de code mee die wordt gekopieerd van HubSpot om neer te zetten en op Save & Close te drukken.
  5. Publiceer uw website opnieuw . En probeer de echte website te openen. U ziet het formulier van HubSpot verschijnen!

Alleen dit is uw WebFlow -website al verbonden met HubSpot. Elke informatie die is ingevuld, loopt onmiddellijk tegen CRM tegen met trackinggegevens, waardoor lead koesterende automatisering eenvoudig wordt!

VOORBEELD VOOR ILLUSTRATIES: 4 -STEP Infographic -afbeeldingen die gemakkelijk te begrijpen zijn. Met pictogrammen in elke stap (pictogramcode, pictogram Webflow -instellingen, HubSpot -formulieren, elementpictogram

Vragen die mensen de neiging hebben om (FAQ) te vermoeden over WebFlow- en HubSpot -verbindingen

V1: Moet u de WebFlow en HubSpot gebruiken?

A: Voor WebFlow, het plan om geld (kernplan) te verliezen om de aangepaste codefunctie te kunnen gebruiken om de trackingcode in te sluiten. HubSpot kan beginnen met gratis plannen, die trackingcode en formulieren hebben om te gebruiken.

V2: Kunnen we het ontwerp van HubSpot -formulier aanpassen aan onze website?

A: Ja, in het HubSpot -formaat is er een tabblad "stijl", zodat u de kleur, lettertypen en gezichten tot op zekere hoogte kunt aanpassen om bij uw merk te passen. Maar als je echt wilt aanpassen, kan een beetje CSS -kennis vereisen om de code rechtstreeks te schrijven.

V3: Wat zullen de informatie in de originele Webflow -formulieren doen?

A: De oude gegevens die vroeger in de webflow bevonden, blijven op dezelfde plaats. U kunt exporteren naar een CSV -bestand en vervolgens naar HubSpot importeren om alle klantinformatie op één plek te combineren.

V4: Zullen deze codes het web langzamer maken?

A: Trackingcode van HubSpot is ontworpen om als asynchroon te werken, wat betekent dat het samen met andere delen van de website zal worden geladen zonder het hoofddisplay te belemmeren, daarom is de impact op de websnelheid erg klein. Tot het bijna niet voelt

Prompt voor illustraties: Grote vraagpictogrammen (?) Met het WebFlow- en HubSpot -logo naast elkaar.

Samenvatting: verander de prachtige website vandaag in een hoofdproductiemachine!

De WebFlow -verbinding met HubSpot is niet langer een enge technische kwestie, maar het is "noodzakelijke investering" voor alle bedrijven die serieus willen groeien in de digitale wereld. Slechts een beetje tijd om de trackingcode te installeren en over te schakelen naar HubSpot -formulieren zal het marketingpotentieel ontgrendelen dat u misschien nog nooit eerder hebt ontvangen.

U stopt de handmatige werktijd en zit vol met fouten, begint de klantreis van 360 graden klanten te zien en kunt automatische marketingcampagnes maken die echt de klant zijn. Het is tijd om uw prachtige Webflow -website te veranderen in "kwaliteitsleiderproductiemachines" die 24 uur per dag voor u werkt.

Wacht niet! Probeer de stappen te brengen die ik aanbeveel. En u zult ontdekken hoe krachtig de gegevensgestuurde markt wordt gemeten. Als u een expert nodig hebt om een complexer automatiseringssysteem op te zetten, ons N8N Automation Expert -team Of als u een perfecte website wilt maken vanaf het begin van de Webflow -websiteontwerp- en ontwikkelingsservices zijn klaar om u te ontmoeten!

Prompt voor illustraties: Graph -afbeeldingen die de groei van het aantal kwaliteitsleider laten zien met de achtergrond van het WebFlow- en HubSpot -logo dat de handen stevig vasthoudt

deel

Recente blog

Vergelijk Shopify Markets VS. Multingual apps: wat te kiezen voor e-commerce export?

Wilt u over de hele wereld verkopen? Vergelijk de voordelen van de voordelen tijdens het gebruik van Shopify-markten en taalvertaling-apps. (Mulilingual Apps) om het systeem te selecteren dat het meest geschikt is voor uw winkel.

SEO -strategie voor huurwebsites voor verhuur (machines, onroerend goed, apparatuur)

Voeg klanten toe om te huren met SEO! In -diepte, SEO -strategie voor huurbedrijven, vooral van lokale SEO tot de productpagina.

Maak een geautomatiseerd rapport met N8N + Google Data Studio: bespaar een marketingtijd/week van 10 uur.

Stop met het verspillen van tijd om een te rapporteren te maken! Leer u hoe u verbinding kunt maken met N8N met Google Looker Studio (Data Studio) om een dashboard en automatische marketing te maken.