Tesztfiók és teljes példa

Ez a fejezet egy teljes menetet mutat be: tesztfiók létrehozása, a webhely engedélyezése, majd egy egyszerű űrlap, amely beküldéskor kapcsolatot ad a HubSpothoz. Az alkalmazás és a kulcsok beállítását a Beállítások fejezet írja le.

HubSpot-fiók típusok

A HubSpot négy fióktípust ismer: „Standard”, „Developer”, „Sandbox” és „Marketplace Provider”. A „Developer” fiók ingyenes, és legfeljebb tíz tesztfiókot nyithatsz benne. A kiegészítő működéséhez elég a fejlesztői fiók és egy abban létrehozott alkalmazás.

Az alkalmazást a HubSpot fejlesztői oldalán a Create app gombbal hozod létre. A Public app name mezőbe az alkalmazás nevét írd (például „MyHubSpotAppTEST”), a többi mező nem kötelező. Az Auth fülön a Redirect URLs mezőbe a Your Redirect URL értéke kerül, a Scopes résznél a lépések a Beállítások fejezetben vannak. Ha a jogosultságok felvétele után a HubSpot Update gombot kínál, kattints rá, majd a Create app gombra.

Tesztfiók létrehozása

A tesztfiók „sandbox” módban működik, így élő adat nélkül kipróbálhatod a kapcsolatot. Nem kötelező: ha fizetős fiókod van, használhatod azt is.

1. A HubSpot fejlesztői fiókjában nyisd meg a Testing részt, és válaszd a Test Accounts fület.
2. Kattints a Create developer test account gombra.
3. A felugró ablak Account name mezőjébe írd be a fiók nevét (például „Developer test account 1”), majd kattints a Create gombra.
4. A tesztfiókok listájában kattints a létrehozott fiók nevére.
5. Megnyílik a Create dashboard from scratch fül. Kattints a + New dashboard gombra, adj nevet a műszerfalnak, hagyd bejelölve az Allow everyone to view and edit lehetőséget, és kattints a Create dashboard gombra.

A webhely engedélyezése

1. A WordPressben nyisd meg a JetFormBuilder → Beállítások → HubSpot API fület. A Client Secret és az Install URL (OAuth) mező már ki van töltve, a beállítások el vannak mentve.
2. Kattints az Authorize gombra.
3. A HubSpot Connecting Your Account to HubSpot ablakában válaszd ki a használni kívánt fiókot (például a tesztfiókot), és kattints a Choose Account gombra.
4. Görgess az ablak aljára, és kattints a Connect app gombra.
5. Visszatérsz a WordPressbe: az Authorize felirat helyén az „You are already logged in” szöveg jelzi, hogy a hitelesítés sikerült.

Példaűrlap

A példa űrlap három szövegmezőt tartalmaz, és csak a HubSpot műveletet használja.

1. Hozz létre új űrlapot a JetFormBuilder → Űrlapok oldalon (vagy használj mintát).
2. Vegyél fel három szövegmezőt: név, e-mail és telefonszám, valamint egy beküldő gombot (Action Button).
3. A jobb oldali sávban a Post Submit Actions panelen kattints a New Action gombra, és válaszd a HubSpot kártyát.
4. Az Edit HubSpot ablakban kapcsold be a Use Global Settings kapcsolót.
5. Az AUTHORIZATION TYPE listában válaszd az OAuth 2.0 lehetőséget (az API Key csak régebbi fiókokhoz való), és kattints a Send Request gombra.
6. A beállítások listájának többsége nem kötelező. A Fields Map részben az Email sorhoz válaszd ki az e-mail-mezőt, a First Name és a Phone sorhoz a megfelelő űrlapmezőket.
7. Kattints az Update gombra, majd mentsd az űrlapot.

Megjelenítés és eredmény

1. Tedd az űrlapot egy oldalra a JetForm blokkal, widgettel vagy elemmel, a használt szerkesztőben (Elementor, blokkszerkesztő vagy Bricks).
2. Nyisd meg az oldalt a webhely nyilvános felületén, és töltsd ki az űrlapot.
3. A beküldés után az új feliratkozó megjelenik a HubSpot-fiók Contacts listájában.