Digital agencies' best practices about modern web development, digital and inbound marketing.
How to Provide Database Driven Dynamic Content on HubSpot Web Pages?
The concept of dynamic content originates from the need to provide your website visitors a seamless, personalized, and intuitive path during their buying lifecycle. The content that recognizes the input given by the user and adapt to their needs.
Dynamic content is a component of your webpage that is presented to the user based on their interactions with the previous page or throughout all the pages during their lifecycle. It is an experience that is tailored specifically for the user.
Dynamic Content with Underlying Database
Dynamic content could be further broken down into the one that relies on an underlying database. Dynamic content is pulled out based on user input – the input that is already stored in your database and has various valued associated with it. Based on the need of the subsequent pages, relevant content is pulled out on the web page to inform the user.
This concept has become increasingly common with e-Commerce websites, real estate services, medical services, and more where users might be seeking for information relevant to their areas.
The Logic Behind Database Driven Dynamic Content
The following are the set of core tools that you shall need to create dynamic content for your webpages:
- Data Entry User Interface: This is nothing but a form where the user will be entering data. It could be anywhere within your website, including the landing page. In case of fetch APIs, the user must specify whether they would like to share their location.
- A Centralized Database: It will act as the central processing unit for your dynamic content. It stores your pre-defined data.
- Easily Editable Web Pages: A dynamic page that will call content from your database should be conveniently editable. The marketer should be able to make changes to this page easily.
How to Create Database Driven Dynamic Content on HubSpot?
When it comes to providing dynamic content, HubSpot provides one of the most advanced technologies in today’s marketing era – “Smart Content.”
With the Smart Content technology, you are able to build a personalized experience for users based on
- Device type
- Referral source
- Preferred language
- Contact list membership
- Lifecycle stage
Your dynamic content is displayed on the basis of any of the above mentioned types.
However, Smart Content is not able to deliver Database Driven Dynamic Content Instantly!
At WebbyMonks, our COS-certified developers have cracked the code to generate dynamic content with underlying database for two scenarios. Prior to creating these scenarios, you will have to create a HubDb database.
In this article, we will learn how to create a dynamic website with two options:
Let’s take an example of a local business website. We have created a database with city, zip code, area, and the customer representative. Every data corresponds with each other.
Automatic detection to fetch relevant content
In this scenario, the jQuery API will detect the basic web properties of the user and present relevant content by fetching the associated entry in the HubDb database.
The following image shows the city that has been auto-filled with the geolocation Fetch API. Once the box is auto-filled, users will get all the data that is associated with that city. Let’s now see how it works.
- First create a HubDb database that contains all the essential data pertaining to the location that will be auto-filled by the API.
- On your web page, implement the Fetch API for city (the geolocation API is available for 3 options, namely city, state and country). It is called getCurrentPosition that will pull relevant data based on the auto-filled city.
- Once the user arrives on this webpage the API will ask them if they would like to share their location details.
- On clicking “OK” the API will automatically detect the city and enter it into the box.
- The user gets all relevant data that is associated with that location.
Benefits of a Geo-location enabled dynamic website
- Customized Solutions: 74% customers feel frustrated when website content is not personalized. For instance, a person residing in Canada will not be interested in the events going on in United States on an event search website. With the geo-location enable dynamic website, businesses could engagement by providing personalized content.
- Enhanced UX: It impresses the website visitor with reduced hassle to input location from a long list in the drop-down menu.
- Increased Conversions: Relevant content could garner more interest from your users that will be instrumental in more conversions.
- It reduces the life-cycle journey: Imagine the time it would take for the users to convert when they see a generic page and later get relevant content on data input. User gets personalized content at the second stage, while with the auto-fetch option the very first stage will provide tailored content.
In this scenario, the user will input the requested data (in our case the zip code). On hitting submit, the user will get the details associated with that zip code including the representative and their contact details. This data is fetched from an underlying HubDb database that we had created earlier. Here is an example with the whole function:
- Firstly, the screen will ask vital details from the visitor.
- Here, we have set up the API to fetch the details of the local specialist based on the zip code entered by the user.
- Once the details are entered and the visitor hits “Next,” they will be directed to the next page that will show them all the details of the local specialist for their area.
Industries That Are Fit for Automatic Geolocation or User Input Fetch API
Food Delivery: The Geolocation API is the best fit for the restaurant industry as the user could allow the app to figure out their location and provide customized options to order food from outlets that are nearest to them. User input could also be used, wherein the visitor could clearly specify their location to get relevant options.
Online Cab Booking: The API fetches your current location so that you could simply enter your destination to get your cab and fare options.
Online Ticket Booking: Movies or travel. Today almost every online booking website is asking you to auto-detect your location to provide you options based on your current city or other location specifications.
Real Estate: A large real estate solution provider should inevitably include the “getCurrentPosition” function to provide the best housing options to their visitors. Alternatively, they could ask the user to input zip code or area so that they could get the options from their desired area.
Medical Industry: More and more medical majors are creating a chain of their own medical service outlets or pharmacy outlets. These medical service providers could provide customized whereabouts of the nearest clinic, hospital, or medical store based on the current location of the visitor. Also, user input could be a great option if a user is searching for services in another area.
News Website: Auto-detection could be used to serve local news to the user based on their current location. This could include current affairs, events, weather, and more to give a personalized news page to the visitor.
Online deals: Let the customers only see deals that are available in their area. Once the customer enters the website, the geo-location function will locate their current location and return only those offers that could be availed by them.
Auto-detection for hotel suggestions: If a user has downloaded an app from a hotel aggregator, they could receive push notifications for the best places to stay as they get closer to a new city.
Geolocation technology have something to offer beyond suggesting popular restaurants nearby and yet another location based dating app. You just got to think what activities are location-related and where would people love to see a little bit of automation.
Latest posts by Dev Shah (see all)
- How to Provide Database Driven Dynamic Content on HubSpot Web Pages? - November 29, 2017
- HubSpot – Shopify Integration: An Inbound Touch for Your Shopify Store - November 9, 2017
- Are These Clear Indications That HubSpot COS Is HubSpot CMS? - October 27, 2017