MakeWebBetter Connect is a no-code integration and automation platform that helps HubSpot teams connect apps, synchronize data, and automate workflows using AI-assisted and agentic execution.   

It enables teams to replace fragile, rule-based automations with AI-assisted and agentic workflows that evaluate context, trigger actions, and reliably execute multi-step processes across connected tools.   

Core Features of the new and updated MakeWebBetter Connect include: 

• Agentic & AI-Assisted Automation: Build workflows where AI can evaluate context, recommend or execute decisions, and adapt execution paths dynamically—while maintaining human-defined controls. 
• MCP-Powered Action Layer: Expose workflows as AI-callable actions, enabling AI-assisted execution of approved automations across connected systems.  
• No-Code Workflow Orchestration: Design and manage workflows using a visual builder with support for advanced logic, approvals, routing, and data transformations. 
• Native HubSpot Logic: Use deep HubSpot triggers and actions to build CRM-centric automations that stay aligned within HubSpot’s data model. 
• 400+ App Connectors and Growing: Connect HubSpot with a wide range of business applications using prebuilt integrations. 
• Enterprise-Ready Reliability: Secure credential handling, execution logs, retries, auditability, and role-based access controls for production-grade automation. 

Before you begin going through the documentation, here’s a brief explanation of the key terms that you will come across. This is to help you understand the usage of our app as clearly as possible. 

• Workflow: A workflow is a sequence of steps that automate a process across one or more apps. 
• Trigger: A trigger is the event that starts a workflow, such as a new record being created or a scheduled time being reached. 
• Action: An action is a task performed by the workflow after it starts, such as updating a record, sending a message, or creating a task. 
• Connector: A connector represents an app or platform (like HubSpot or Slack) that can be used in workflows. Connectors make triggers and actions available. 
• Connection: A connection is an authenticated link between MakeWebBetter Connect and an external app, allowing workflows and AI to access that app securely. 
• Run: A run is a single instance of a workflow being executed. Each time a workflow runs, it creates one run. Agentic AI: Agentic AI refers to AI that can evaluate context, make decisions, and execute actions dynamically instead of following fixed rules. 
• MCP (Model Context Protocol): MCP is a system that allows AI to safely execute real actions across connected tools within defined permissions. 
• MCP Server: An MCP Server defines what tools and actions AI is allowed to access and use during execution. 
• Todo: A todo is a task created by a workflow that requires human intervention, such as review or approval, before automation continues. 

You can sign up in just a few simple steps. 

• Choose how to sign up: You can either continue with your Google account or sign up using your email. 
• Fill in your details: Enter your first name, last name, and email address, then create a secure password.  
• Create your account: Click the Sign Up button to get started.  
• Verify your email: Check your inbox and click the verification link that is sent to you. 

Once your email is verified, you’ll be automatically redirected to the Home page onboarding screen, where you can explore the platform and learn how everything works.  

The Dashboard in MakeWebBetter Connect provides a quick overview of your project’s automation activity and usage. It helps you understand what’s running, how your workflows are performing, and how your resources are being used, all from one place. 

At the top of the dashboard, you’ll see a summary of key metrics:

• Total Workflows: Total number of workflows created in the project
  
• Active Workflows: Number of workflows currently running
  
• Total Connections: Number of apps connected to the project
  
• Recent Runs: Total workflow executions over a recent period 

Runs (Last 7 Days) 

This section shows a visual chart of workflow executions over the past 7 days. It helps you:

• Track automation activity over time
  
• Identify spikes or drops in workflow runs 

Usage Overview

The Usage Overview section displays:

• AI Credits used in the current billing cycle
  
• Your current plan

This helps you monitor resource usage and stay aware of plan limits.

MakeWebBetter Connect allows users to create workflows by connecting apps and platforms using multiple authentication mechanisms when configuring triggers and actions.

Workflows are created using a no-code visual workflow builder, which supports both building workflows from scratch and using prebuilt workflow templates. These workflows enable centralized app integration and automated data synchronization across multiple platforms.

The platform includes free, ready-made workflow templates designed to connect commonly used applications without writing code. Additional templates are unlocked automatically as app connectors are configured, allowing users to activate automation between connected apps with minimal setup.

To create a workflow:

1. Navigate to Workflows from the left-side navigation menu to view the workflow list.
   
2. Click New Workflow to build a workflow from scratch or select a template.
   
3. Select a workflow to open it in the workflow editor, where it can be configured or updated.

Each workflow includes management options accessible via the ellipsis (three-dot) menu, allowing users to:

• Move workflows to folders
  
• Duplicate workflows
  
• Export workflows
  
• Delete workflows

This structure ensures workflows are easy to create, manage, and scale as automation needs grow.

If you do not want to import an existing workflow file, MakeWebBetter Connect gives you the option to create a new workflow. This can be done via two methods: 

• By creating a new workflow from scratch 
• By using a pre-built workflow template   

To build a new workflow from scratch in MakeWebBetter Connect, you’ll have to click on the ‘New Workflow’ dropdown on the right again and choose the ‘From Scratch’ option.  

Now, building a workflow from scratch in MakeWebBetter Connect gives you complete control over triggers, actions, and AI-driven decision logic across connected platforms. 

Here’s a step-by-step guide on how to create a workflow from scratch in MakeWebBetter Connect 2.0:  

Step 1: Go to Dashboard → Workflows → Create Workflow, then choose Create from Scratch. 

Step 2: Add Trigger

• Choose a Trigger based on your requirement.
• Create or select a Connection.
• Map all required trigger fields.
• Save the configuration.

Step 3: Add Action

• Click Add Action.
• Select the action as per the requirement.
• Create or select the required Connection.
• Map all required fields for the action step.

Step 4: Test the Workflow 

Run Test Step.

• If it fails, fix mappings or errors and re-test.
  
• If it passes, continue.

Step 5: Publish & Verify

Publish the workflow, perform the trigger externally, and confirm success in Runs History.

• Webhooks run instantly
  
• Polling triggers may take up to 10 minutes

With the recent updates, in addition to syncing data, workflows can now include AI-assisted actions such as sending notifications, follow-ups, or internal alerts via email, SMS, WhatsApp, or other connected tools. In addition, AI agents can evaluate context and decide when and how actions should be executed, rather than relying only on static rules. 

Key Workflow Components: 

• App triggers and actions (core and app-specific events) 
• Agentic AI steps that evaluate conditions and guide execution 
• Notifications, updates, and cross-platform actions 

Triggers and actions are accessed through app connectors, which can be set up while creating the workflow. To start, click Create a workflow from scratch from the app home to open the workflow builder directly. 

If you want to use a pre-built template for your workflow, MakeWebBetter Connect gives you the option to choose from existing templates. To avail this option, you have to click on the ‘New Workflow’ dropdown again and select the ‘Use a Template’ option.   

From there, you can pick the desired workflow template from the provided list. Additionally, each of the pre-built workflow templates comes with predefined triggers and actions, which can be expanded or customized as and when required. 

When you navigate to the Workflows section, you can find the option to Import Workflow by clicking on the ‘New Workflow’ dropdown on the right and selecting the ‘From Local File’ option.  

Once you reach here, you can browse to find the required workflow from your device or drag and drop the workflow file to import it. Remember, to import a local workflow file from your system, you need to ensure that it is in the JSON format that MakeWebBetter Connect understands. 

Runs are simply records of when a workflow runs. Every time a workflow starts and stops, it creates one run. In other words, each run shows one time the system tried to carry out a workflow, whether it finished successfully or not. 

All the runs pertaining to your published workflows are displayed in this section. The details of these runs would include: workflow name, status (successful/failed), started at (run date), and duration (time taken by the system to process the workflow).  

From here, you can see the status of your workflows and ‘Retry’ runs on your failed workflows by selecting a workflow and clicking on the ‘Retry’ dropdown on the right. 

The updated version of Connect gives you the option to either retry the run on the latest version or from the exact step where it failed.    

In the ‘Issues’ section within workflows, all failed runs of workflows are logged with information on the exact step they failed, the number of unsuccessful runs, the first seen status of the workflow, the last seen status of the workflow, and its current status. 

Notably, as the failed runs are logged in this section, an email is sent to the registered user who ran the workflow to notify them about the unsuccessful run.      

‘Tables’ is a new built-in feature in MakeWebBetter Connect, which is aimed at providing a lightweight and native data source within the automation platform. 

These tables are like simple databases you can create–featuring rows and columns–that your workflows can use to store, retrieve, update, and manage structured data. It eliminates the need to depend on external spreadsheets and databases like Google Sheets and Excel.  

By clicking on the ‘New Table’ option on the right, you can create a new table from scratch and upload all the relevant data for your workflows on the platform. 

Alternatively, you can choose to import an external spreadsheet by clicking on the ‘Import’ option on the top right. Notably, you have to ensure that the table you want to import onto the platform is in the CSV format.   

Todos is a new feature in MakeWebBetter Connect that enables human intervention within automated workflows. While building a workflow, users can add steps that create tasks (todos) requiring manual action or approval before automation continues.

When a workflow creates a todo, it appears in the Todos dashboard, which serves as a centralized view for managing all tasks generated by automations.

Settings Todos in Workflows: 

In the visual workflow builder in MakeWebBetter Connect, click on the ‘+’ add step option, type ‘Todo’ in the search bar before clicking on the ‘Create Todo’ option.

• Moving on, you will be given the option to choose if you want to create an ‘Internal’ todo or send notifications and approval links through external channels by clicking on ‘External Channel’.  

• Once you pick the option you want, click on ‘Add Steps’, and move on to adding other details on the next screen, like the ‘Title’ of the Todo, its ‘Description’, and the specific user or team that you want to assign it to.  
• You can also configure whether the workflow should pause and resume only after the task is completed or continue without pausing.  

The Todos dashboard displays all workflow-generated tasks with details such as: 

• Title 
• Created by (workflow source) 
• Assigned to (user or team) 
• Status (example: needs action or completed) 
• Date created 

Users can filter todos by assignee or title and quickly identify tasks that need action.

‘Todos’ helps teams maintain control over critical steps while keeping workflows automated and efficient. 

The Connections section in MakeWebBetter Connect manages all authenticated links between your project and external applications. Connections enable Agentic AI and MCP-powered workflows to securely access systems, evaluate context, and execute real actions across your tech stack. 

This section replaces the earlier Apps section and serves as the foundation for reliable, AI-driven automation. 

In MakeWebBetter Connect, you can create connections using secure OAuth-based authentication or supported API-key methods or even Basic authentication. 

You can create a connection: 

• While building workflows (when selecting triggers, actions, or AI-executable steps), or 
• Directly from the Connections page using New Connection 

Once created, connections can be reused across workflows and exposed as MCP-enabled actions for AI agents (more on this later as you scroll down the document). 

The Connections dashboard provides a centralized view of all connected systems, including: 

• App (The connected platform, like HubSpot, Gmail, Slack, etc.) 
• Status (Whether the connection is active or inactive) 
• Owner (The user responsible for establishing the connection) 
• Connected at (The exact time when the connection was established) 
• Workflows (The number of workflows currently using the connection)  

Filters such as Status, Connector, Name, and Owner help manage connections at scale.

From the Connections page, users can: 

• Edit or authorize connections 
• Replace any one of the existing connections without breaking workflows 
• Monitor how many workflows depend on each connection  

If a connection becomes inactive, AI agents and workflows using it will pause or fail until access is restored.  

The MCP Servers feature in MakeWebBetter Connect provides a secure execution layer that allows AI agents to perform real actions across your connected tools—only within the permissions you explicitly define.

These servers help control what AI can access and what actions it’s allowed to perform, making sure automation stays safe and predictable. 

What problem do MCP Servers solve?

Traditional AI tools can analyze data, but they cannot safely:

• Take real actions across systems
• Respect role-based permissions
• Provide full auditability
  

MCP Servers bridge this gap by acting as a controlled gateway between AI and your tools—so AI can move from insight to execution without introducing risk.

When would you use MCP Servers? 

• You want AI to execute real actions across your tools, not just analyze data 
• You need AI to operate across multiple systems (for example, HubSpot, Slack, email) 
• You want clear control over which tools AI can use and what it can change  
• You need audit logs and traceability for AI-driven actions (for compliance, debugging, or review)

Some examples of the same include: 

• AI detects a stalled deal and updates the record in HubSpot, then notifies the sales team in Slack. 
• AI reviews incoming support requests and creates follow-up tasks only when certain conditions are met.

What MCP Servers do NOT do?

MCP Servers do not:

• Allow AI to act outside the tools you explicitly add
• Automatically modify data without a defined action
• Replace workflows or triggers you have configured
• Make irreversible changes without logging them

Every action executed through an MCP Server is:

• • Explicit
  • Logged

• Reviewable

In short, MCP Servers act as a safe execution layer that allows AI to move from insight to action, while keeping you in control of what the AI can do.

Think of an MCP Server as a permission boundary: AI can only see and act through the tools you attach here. When you click New MCP Server, you are taken to the MCP Server configuration screen, where you can set up how AI will interact with your connected tools. 

The Configure tab is where you define the MCP server’s capabilities. 

• Click on ‘Add tool’ to attach tools or integrations that the AI can access 
• Each added tool determines what actions the AI is allowed to perform 
• You can rename the server at the top to easily identify its purpose, for example: “Sales AI – HubSpot + Slack” 

Until tools are added, the server will display “No Tools Added Yet”. 

The Connect tab is used to link your MCP Server with external AI tools so they can access and use the server. Connecting an MCP Server authorizes the selected AI client to request actions, but execution still follows the permissions defined in the Configure tab.

From this section, you can select the AI client you want to connect to, such as Claude, Cursor, Windsurf, or other supported tools. Each option provides guided setup steps to complete the connection.  

If you want to connect your MCP Server to an AI tool other than Claude, Cursor, or Windsurf, you can do so using the Server URL provided in the Connect tab. 

To connect, follow these steps: 

• Go to the Connect tab of your MCP Server 
• Select ‘Other’ from the list of AI tools 
• Copy the Server URL shown on the screen
• Paste this URL into the MCP or integration settings of the external AI tool 

Once added, the AI tool can communicate with the MCP Server and access the tools you have configured, within the defined permissions.

Note: When connecting third-party AI tools, ensure you trust the AI client, as it will be able to request actions within the permissions you’ve defined for this MCP Server.

The History tab shows a record of all actions run through the MCP Server. It helps you see what actions were triggered, when they ran, and whether they were successful. It allows administrators to review, troubleshoot, and validate how AI is interacting with connected systems.

This view is useful for checking if AI-triggered actions are working as expected.

What you can check in this section? 

• Action: The task or action that was executed (for example, sending an email)
• Status: Whether the action succeeded or failed 
• Created At: The date and time the action was run 

You can use the search and filter options to quickly find specific actions or review failed runs. 

• Create separate MCP Servers for different teams (Sales, Support, Ops)
• Start with read-only or limited actions and expand gradually
• Use descriptive server names
• Review MCP History regularly, especially after enabling new tools

The Connectors section in MakeWebBetter Connect lets you manage all available app connectors for your project. Connectors define which applications can be used in workflows, connections, and MCP-powered actions. 

This section replaces the earlier App Marketplace and provides more control over which integrations are visible and usable within your project. 

What You Can Do Here?  

From the Connectors page, you can: 

• Browse all available app connectors 
• Search for connectors by name 
• View connector details such as display name, package name, and version 

Each connector represents a supported application that can be connected and used in workflows. 

Controlling Connectors

The Control Connectors option allows you to manage which connectors are shown to users: 

• Highlight the connectors most relevant to your use case 
• Hide connectors you don’t want to use 

This is especially useful for teams and enterprise environments where you want a focused, controlled set of integrations.

The Account Settings section lets you manage your personal account preferences and security settings in MakeWebBetter Connect.

From this screen, you can: 

• View account details: See the email address associated with your account 
• Theme: Choose your preferred theme or follow system settings. Apart from default system settings, you can opt for the ‘Light’ or ‘Dark’ theme. 
• Password: Change your password or request a reset link 
• Two-Factor Authentication (2FA): Enable or disable 2FA to add an extra layer of account security 
• Delete Account: Permanently delete your account if required 

Account Settings help you keep your profile secure and customize how you use the platform.

The Active Sessions section shows all devices and browsers where your account is currently logged in. It helps you monitor account access and quickly revoke sessions you don’t recognize.

In this section, you can: 

• View active sessions with details such as browser, device, last access time, and IP address 
• Revoke a specific session to immediately log that device out 
• Use Revoke all to sign out from all active sessions at once  

Revoking a session immediately ends access from that device, helping keep your account secure. The Active Sessions section gives you full visibility and control over where your account is being used. 

The Project Settings section allows you to manage configuration and access settings for your project.

The General tab is used to manage basic project details:

• Update the Project Name
  
• Save changes to apply updates across the project

The Team tab lets you manage who has access to your project and collaborate with others. 

From this section, you can:

• Invite team members to join the project
• View existing project members
• Track pending invitations and their status 

The Team tab helps ensure the right people have access to collaborate on workflows and automations within the project. 

The Alerts tab lets you manage how and where workflow failure notifications are sent.

From this section, you can add or remove email addresses that should receive alert notifications. 

Notably, Alerts help you stay informed about workflow issues without overwhelming your inbox.

The Invite User option allows you to add new users to your project or platform. 

To invite a user: 

• Enter the user’s email address 
• Select where to invite them (project or entire platform) 
• Choose a platform role (for example, Admin) 
• Click Invite to send the invitation 

Invitations are valid for 24 hours. Once accepted, the user will gain access based on the role and scope selected. This feature makes it easy to collaborate with team members while maintaining control over access levels.  

The FAQ Pro module elevates the way you incorporate FAQs on your website, providing a feature-rich solution with customizable design elements for a seamless and user-friendly experience.

FAQ Pro module offers valuable features for your web pages, specially curated to boost traffic and enhance adaptability.

These features include:

• Allow users to find answers quickly by using keywords on our Search bar.
• Categorize FAQs into user-friendly sections for better clarity.
• Simplify user experience, find answers effortlessly.
• SEO-ready for high search rankings.
• Creative layouts for unique designs.
• Perfectly responsive on all devices.
• Full customization to match your brand.
• Control content order with ease.
• Stylish two-column content organization.

Use special markups for Google featured snippets and improved website visibility through FAQ Schema. Here’s more about FAQ Schema and how to add structured data.

The FAQ Pro module offers three different layouts for you to set up your FAQs suitable to your website. The layouts are:

3.1) Vertical Tabs Layout

Take a look at how the vertical layout stacks your elements gracefully from top to bottom, creating an elegant and space-efficient design.

3.2) Horizontal Tabs Layout

Here is a visual representation of the horizontal layout, illustrating how content can be arranged side by side for an engaging and dynamic web page design.

3.3) Basic Layout

Here is a representation of the basic layout, providing a clean and balanced structure for your content.

The basic layout is suitable for businesses choosing to display a small amount of questions that do not need specific categorizations.

4.1) Content

• Under “Content”, you can select how your FAQ content is displayed.
  
• “Layouts” as we have already discussed, lets you choose among the three layouts provided.
• Alter and update the section head under the dropdown “Head”, select the display image, ALT text, and size of the image.
• The “Search” dropdown lets you modify the search bar on your module. You can change the placeholder text on the search bar, as it appears on the section. 
  • You can also select whether you want the typing animation to display on the page.
  • Also add the image and text for no results.
• “Accordion” is where you can customize the navigation icon, tabs and content, and toggle icon.
• The ”Custom Id” lets you add a unique custom id to the FAQ section. 
• If you are already using the jQuery library on your website, you can disable it from this location to improve the performance of the website.

In both of the Vertical Tabs and Horizontal Tabs layouts, you will get an option to manage tabs on your module. These tabs help organize the FAQs into certain categories so the user can browse through them easily.

Here, you can select whether to enable the navigation icon, type of icon, number of navigation tabs to be used, the navigation and toggle icon appearance, and edit each tab individually.

You also get a checkbox saying “First Item Open By Default”. This allows you to keep the first question dropdown open. 

In the Basic Tabs layout, you get an extra option to choose whether you want to display your FAQs in a One Column layout or a Two Column layout.

4.2) Style

• Container: Adjust the container width in this section. 
• Head
  • Background: Adjust the background color to your requirements.
  • Spacing: Set the content spacing according to both desktop and mobile view.
  • Alignment: Align your content according to the view you want on your preferred device.
  • Max Width: Alter the width of your content head.
• Search
  • Input Field: Here, you can change the search input fields’ text color and background color. You can change the border color and width, hover color, and corner radius.
  • Icon: Here, you can change the icon color and background color of the icon.
  • Highlight text: Select the highlighted text color displaying on the search bar under this section.
  • Width: Set the width of your search bar.
• Tabs
  • Text: Adjust the color of the text on navigation tabs.
  • Background: Set the background color of the tabs.
  • Border: Set the style, color and width of the border.
  • Hover: Opt out hover border and background colors.
  • Active: Change the color of the currently selected tab.
    
  • Box Shadow: Enable/disable and select the color of box shadow.
• Accordian
  • Background: To change the background color of the accordion, you can input the hex code and it will be reflected on the screen.
  • Border: This option allows you to edit the accordion border style. You can change the border style, color, and width. Additionally, you can tick the checkbox to apply these same settings to the bottom only.
  •  Corner: Just simply drag the slider to manage the border radius.
  • Spacing: This section deals with the spacing of the accordions. Each FAQ shall be at an equal distance from each other. 
  • Box shadow: Enable or disable the box shadow with the help of the toggle button.
  • Hover: While hovering over the accordion box, you can change its color as well as the background color.
  • Border: Set the style, color and width of the border.
  • Max width: To enable the maximum width for the accordion, use the toggle button and set the width to whatever you please.
• Question
  • Overwrite Typography: Select if you want to overwrite typography, and if so then you can select the font and line height of the same.
• Answer
  • Overwrite Typography: Choose if you want to enable or disable typography, and customize the font and line height for it.
• Toggle Icon
  • Here, you can customize the toggle icon color just by inserting the hex code.

We sincerely hope our FAQ module brings value and enhances user and marketer experiences. At MakeWebBetter, we’re here to assist with your HubSpot journey.

If you ever require a custom HubSpot module or personalized HubSpot CMS/CRM setup, please feel free to reach out. Your satisfaction is our utmost priority.

Creating a donation page for nonprofits has never been easier, yet thorough.

Donate Now – A donation page module that comes in handy with donation page styling and epic customization. Master appearance and donation page styles that help bring clarity in seconds, these are conveniently available with the drag-and-drop facility in this module.

The module certainly gives you an upper-hand in creating the master page for your non-profit.

The Donate Now module contains all the elements that help you style a donation page that’s attractive enough for noble people’s attention and make your efforts worthwhile. 

The Donate Now module allows you to:

• Use 2 Layouts – Hunger Relief & Nature’s Defender.
• Avail of multiple payment gateways.
• Embed payment form using FormPay.
• Customizable Amount Cards.
• Personalizable designs and branding options for the Donation Card.

The Donate Now module benefits you in the following ways:

• Deliver an emotional appeal to your website visitors.
• Collect leads with the donation forms.
• Gain customer trust and loyalty.
• Make your nonprofit page standout and influence people in taking actions.
• And most importantly, fight the cause in style!

Setting up the Donate Now Module is easy and straightforward. All you have to do is perform a simple drag and drop.

Now let’s go through the setup steps:

• First, log in to your HubSpot account and navigate to the “Marketing” tab.

• Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.

• Select the template and create your web page as usual. Under the module selection menu, search for “Donate Now” and select the module.

• Now simply pick the Donate Now module, drag, and drop it wherever you want on your page. You’ll see a new module appear on the page.

• Once you drag and drop the Donate Now module to your page, you will get to choose among the two module layouts.

Now let’s move on to the module settings and functionalities as per their layouts.

Hunger Relief Layout

Let’s look at the content setting when you choose Hunger Relief as your layout suited to your purpose.

• Starting with “Payment Method” which involves two options:
• FormPay: You can insert the embed code of a form that you obtain from the FormPay App after creating it within the application, check the FormPay details here.
• Direct Link: Here you can insert the link to the payment checkout page.

Note: If you require assistance with customizing the direct link method, you can reach out to us for support.

• You can also add the FormPay embed code to add the payment form on the website.
• In the “Heading” menu, you can create/edit the title or appeal you want to construct through the donation page. 
• Next is the “Icon Box” menu, where you can add icons and text of your choice to the module.
• In the “Category” section, you have to choose how to regulate your donation form.
• Under the “Currency” section, you can select whatever currency you want to receive donations in.
• The “Amount Card Icon/Image” helps you set the suitable icon for your amount card.
• Next are the “First Category” and “Second Category” sections, which you can update according to the categories you chose prior in the process.
• Next comes the “FormPay” section that will help you customize the Title of the FormPay payment of the payment form that appears when the user clicks on the Donate CTA button.
• The ”Custom Id” lets you add unique custom ids to your donation section.

Nature’s Defender Layout

Here is the content setting when you choose Nature’s Defender as your suitable layout.

• The “Payment Method” in this layout is similar to the one in the Hunger Relief layout.
• The “Heading” menu is also similar to the Hunger Relief layout. But here, you can also add a description.
• The “Currency” menu also remains the same.
• You can add an image and the suitable alt text in the “Image” menu.
• Content

• Mini title: Add a mini title to your donation box.

• Link: You can add links, and adjust the test, link type, and URL of your choice.

• Title: Add an influential title to your donation section.

• Subtitle: Write positive notes about your mission in the subtitles.

• Progress bar: Under the progress bar, you can custom edit the Achieved Target, Final Target, and Goal Achieved Label.

• Amount: Furthermore, you can customize the amount cards (suggested amounts) as above. They will be displayed as donation amount suggestions to the donor.

• Add an “Error message” to your donation page.
• You can also add a “Button” with suitable text and icon.
• The “Social Icon” lets you connect your socials and show you reach with social proof and build credibility. 
• This is exactly the same as discussed in the Hunger Relief Layout. You can customize the payment form by FormPay.
• The ”Custom Id” lets you add unique custom ids just like in the Hunger Relief Layout.

Hunger Relief Layout

• Starting with “Container”, where you can adjust the appearance of your donation box.

• Background: You can add/replace/remove the background image from here. Customize the alignment of the image.

• Spacing: Here in the Spacing tab, you will find a few more customization options to decide on the appearance of all the elements of this page module.
• Max width: To enable the maximum width, use the buttons and set the width to whatever you please.

• Next comes “Title”, where you can change the desktop and mobile typography and text shadow on your title bar.
• Icon Box

• Text: Adjust the text typography on your preferred device view.

• Background: Choose the background color of your icon box as you prefer.

• Corner: Adjust the radius of your icon box.

• Icon: The Icon you chose, also has customizable settings i.e. background color of the icon image, its radius, & color.

• Donation Card

• Background: Change the background color of your donation card to your likings.

• Corner: Adjust the radius of your donation card as you want.

• Spacing: Adjust the margins and padding of your card as suitable.

• Inactive tab: Alter the text style and background color for your inactive tabs.

• Active tab: In addition to the functionalities of Inactive tab, Active tab also lets you adjust the border of your card.
• Description: Set the description typography for mobile and desktop view.

• Amount Card

• Inactive: Easily adjust the background color, border style, corners, label font and line height, icon and icon background color, amount font, and input color on your amount card.

• Active: Active card also lets you change the background color, borders, label, icon and its background color, amount font, and the input text and color. The only thing it excludes is the corner adjustments.

• Button

• Under “Button”, we can alter the text, background color, border color and style, corners, and margins.
• In the “Hover” extension, we can adjust the text color, background color, and border color of the same.

• Adjust the text color of “Help text” to enhance your donation tab.
• You can also enhance the text color of “Error message”.
• Next, the container & body text of the payment form of “FormPay” is customizable with color concentration.

Nature’s Defender Layout

• The “Container” menu works just like in the Hunger Relief layout.
• The “Title” is also similar to the Hunger Relief layout.
• The “Sub Title” allows you to adjust the typography in desktop and mobile view.
• Under “Image”, you can adjust the radius of the image used.
• The “Content” menu is identical to how it is in the ”Content” section of this layout itself. Just simply customize it as you go.
• Just like the “Content” menu, the “Button” works the same as it does in the “Content” section of this layout. The aesthetics are in your hands!
• Decide the outlook of your social icons in the “Social Icons” menu.
• Adjust how your FormPay section looks, its container, title, icon and icon background color, and how the input fields look in the “FormPay” menu.

Finally, just save and publish the changes to your webpage by clicking on the “Publish” button in the top right corner of the page editor.

We hope you’ll love working with our Donate Now module and create a seamless experience for both your users and marketers on your team. Here at MakeWebBetter, we strive to make your experience with HubSpot a better one! 

Just in case you have a custom HubSpot module requirement or need a customized HubSpot CMS or CRM setup, hit us up.

The Location Finder Module is a tool that allows website owners to easily embed interactive maps on their websites. It offers a range of features that can enhance the user experience for website visitors, such as custom map styles, customizable info windows, and the ability to add markers and pins to specific locations.

The Location Finder module in HubSpot includes a range of features that can help you create engaging and interactive maps for your website. 

These features include:

• Customizable map styles, including color schemes, markers.
• Ability to add markers, pins, or annotations to specific locations on the map.
• Customizable info windows to display additional information about a specific location on the map.
• Multiple layout support: choose between basic and advanced map layout.
• Ability to pin multiple locations on map (requires api key)
• Multiple Map Theme options for advanced layout (requires api key): You can Choose between Default, Silver, Night mode and Retro. 
• Mobile-responsive design and clean UI for easy navigation on any device.
• Zoom and pan functionality for enhanced user experience.

Using the Location Finder Module can offer a range of benefits for your website, such as:

• Improved user experience for website visitors.
• Increased conversions for businesses with physical locations.
• Better search engine optimization for websites with embedded maps.
• Customizable design options allow for consistent branding.
• Mobile-responsive design ensures compatibility with all devices.

Setting up the Location Finder Module is easy and straightforward. All you have to do is perform a simple drag and drop.  

Now let’s go through the setup steps:

• First, log in to your HubSpot account and navigate to the “Marketing” tab.
  
• Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.

• Select the template and create your web page as usual. Under the module selection menu, search for “Location Finder” and select the module.

• Now simply pick the Location Finder module, drag, and drop it wherever you want on your page. You’ll see a new module appear on the page.

• Once you drag and drop the Location Finder module to your page, you will get to choose among the two module layouts.

Now let’s move on to the module setting.

Basic Layout

• In the “Basic” layout settings, you will see this dropdown menu.
• In the “Content” menu, you can customize the map’s appearance, add title and descriptions, and set the location that you want to display on the map.
• The iFrame code can be used to embed the responsive Google Maps on your website. You can generate this code on Google Maps easily.
• To set the location of the map, click on the “Location Card” tab and proceed to clicking on “Content”, enter the address, city, state, or zip code of the location you want to display on the map.
• Under the “Content” button, there is also a details button where you can add further details or redirect links to your outset, right on the map!
• Below the “Content” section on the location card, we also have a “Card Position” dropdown where you can choose the position where your location card appears on the map.

Advanced Layout

• In the advanced layout module settings, you will see these dropdown menus, with each of them working to customize your map addition.
• The “Content” and “Layout” dropdowns function similarly in both the layouts, so let’s jump straight to the “Location”, “Map” and “Pointer”
• Starting with the “Location” menu. Here, you are required to provide the latitude and longitude coordinates of your location in order for the marker to show up on the map. You can also add a “Button” to the map and the location’s image on the Info Card that you can customize according to your needs.
• Moving onto the “Map” menu, you will get a variety of options to customize your map content, location, zoom level, as well as the Map Themes.
• Next comes the “Pointer” dropdown where you can edit the map pointer icon as you please. 

Basic Layout

• Once you’ve set up the location, click on the “Style” tab to customize the appearance of the map. Here, you can edit the content, map, and location card appearance.

• Content
  • Container: Adjust the container’s spacing and width under this section
  • Alignment: Set content alignment as per your requirements for mobile and desktop view.
  • Mini Title: Edit the Mini title typography according to mobile and desktop view
  • Heading: Edit container text heading size and typography suitable to the view.
  • Description: Write and edit content description according to the view.
• Map
  
  • Corner: Adjust the corner radius and scale of your map.
  • Height: Set the height of your map on desktop, tablet, and mobile view.
    
• Location Card
  
  • Background: Set the background image and color as you want to display on your location card.
  • Spacing: Set the spacing and padding of your location card on desktop and mobile view.
  • Title: Edit the title typography according to mobile and desktop view.
  • Subtitle: Edit the subtitle typography as per the mobile and desktop view.
  • Address: Edit the address typography and icon according to mobile and desktop view.
  • Button: Adjust the button style and typography as you please.
  • Box Shadow: Enable box shadow on your location card if suitable for your page.

  Advanced Layout

• Moving on, the “Style” section is almost the same as well, with the difference being the “Info Card” instead of a “Location Card”.
  

• Content
  • This extended menu is the same as explained in the Basic Layout.
• Map
  
  • This menu also includes the same features as Basic Layout.
• Info Card
  
  • Background: Set the background color for your info card as suited to your page and theme.
  • For the rest, your card spacing, alignment, title, and address are to be edited just as the Basic Layout.

Finally, just save and publish the changes to your webpage by clicking on the “Publish” button in the top right corner of the page editor.

That’s it! Your Location Finder module should now be live on your webpage, displaying the location(s) you’ve set up.

We hope you’ll love working with our Location Finder module and create a seamless experience for both your users and marketers on your team. Here at MakeWebBetter, we strive to make your experience with HubSpot a better one! 

Just in case you have a custom HubSpot module requirement or need a customized HubSpot CMS or CRM setup, hit us up.

The FAQ module in the HubSpot CMS allows you to add frequently asked questions to your website pages easily.

It includes a question-and-answer format with expandable sections for each question. You can customize the colors, styles, and layout of the FAQ module to match your website design.

The FAQ Module in HubSpot offers beneficial features for your web page to help drive more traffic and offer transparency.

These features include:

• Adding endless questions & answers. 
• Search functionality to easily find specific questions or keywords.
• Ability to add, delete and reorder questions and answers.
• Marketer-friendly module with a clean and simple design.
• Customizable colors and styles for the accordion and text.
• Mobile-responsive design for optimal viewing on different devices.

The FAQ module

• Helps to establish trust and credibility with potential customers by providing clear and accurate information.
• Increases website engagement and reduces bounce rate by keeping visitors on your site longer.
• Potentially reduce the number of support tickets or inquiries your team receives.
• Improves SEO by using relevant keywords and phrases in the questions and answers.
• Enables you to gather insights into your customers’ concerns and questions, which can help inform your marketing and product development strategies.

Setting up the Faq Module is easy and straightforward. All you have to do is perform a simple drag and drop. 

Now let’s go through the setup steps:

• First, log in to your HubSpot account and navigate to the “Marketing” tab.

• Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.

• Select the template and create your web page as usual. Under the module selection menu, search for “FAQ” and select the module

• Now simply pick the FAQ module, drag, and drop it wherever you want on your page. You’ll see a new module appear on the page.

• Under “Content”, you can edit the content you want to be displayed on your FAQ section. Easily adjust and update the “Mini Title”, “Heading”, and “Description” as you please.
• The “Search” dropdown lets you enable or disable the search functionality above the FAQ section by switching the toggle button. You can also change the placeholder text on the search bar, as it appears on the section. 
• Moving on, set your “Accordion” to present information in a user-friendly way.
• Column Count: Choose whether to have a two column FAQ setup or keep it simple with the one column setup.
• Under the same menu, you can define the number of questions you want on your webpage. Further clicking on the question tab, update the questions and their answers.
• Icons: Display the opening and closing of desired questions with icons and make your page interactive.
  
• The ”Custom Id” lets you add unique custom ids to the FAQ section. Using a toggle button you can enable or disable the custom ID.

• Content

• Container: Adjust the content bottom spacing and width that will show on both the mobile and desktop. 

• Alignment: Align your content according to the view you want on your preferred device.

• Mini Title: Change the style, font, line height of the mini title for both desktop and mobile.
• Title: The settings on the title option are similar to those of the mini title. Here also you change the font size, font type, line height, etc., for desktop users, and the line height and font size for mobile view. 
• Description: Similar to the settings of the title and subtitle, you can make changes in the description box.

• Search

• Spacing: Alter the bottom spacing on desktop and mobile view. Just put in the number and save settings for both views.

• Input Field: Here, you can change the search input fields’ text color and background color. You can input the hex code for the same.

• Icon: Here, you can change the icon color and background color of the icon.
• Hover: While hovering over the icon, you can change its color as well as the background color.  

• Accordion   

• Background: To change the background color of the accordion, you can input the hex code and it will be reflected on the screen.

• Border: This option allows you to edit the accordion border style. You can change the border style, color, and width. Additionally, you can tick the checkbox to apply these same settings to the bottom only.

• Corner: Just simply drag the slider to increase the border radius.

• Spacing: This section deals with the spacing of the accordions. Each FAQ shall be at an equal distance from each other. 

• Max width: To enable the maximum width for the accordion, use the toggle button and set the width to whatever you please.

• Box shadow: Enable or disable the box shadow with the help of the toggle button.

• Question

• Typography desktop: Under this setting, you can change the typography of the desktop view, including font, color, line height, etc. of the questions.

• Typography mobile: Under this setting, you can change the typography of the mobile and line height for the mobile view of the questions.
• Spacing: Here, you can adjust the spacing of the margin above and the margin below, along with the padding for each question.

• Answer

• Typography desktop: It is the same as we discussed in Question.

• Typography mobile: Functions exactly as it does for Question.

• Spacing: Also functions just like in Question.

• In the “Icon” menu, you can change the icon color. Just mention the hex code for the color you want.

Finally, just save and publish the changes to your webpage by clicking on the “Publish” button in the top right corner of the page editor.

That’s it! Your HubSpot map module should now be live on your webpage, displaying the location(s) you’ve set up.

We hope you’ll love working with our FAQ module and create a seamless experience for both your users and marketers on your team. Here at MakeWebBetter, we strive to make your experience with HubSpot a better one! 

Just in case you have a custom HubSpot module requirement or need a customized HubSpot CMS or CRM setup, hit us up.

HubSpot Magento field mapping is an addon for our popular HubSpot Magento integration. This addon maps the customer properties of your Magento store to HubSpot contact properties and lets you decide which fields you want to send data in from Magento to HubSpot.

For example, you have 3 different properties in your HubSpot CRM to store phone numbers — Phone, Mobile, Contact. In such cases, you can select your Magento customer field and HubSpot Contact property, to ensure you sync the phone number into the right property.

For the installation process, visit the basic steps to upload or move plugins in the app/code/Makewebbetter/Package. Then you’ll have to run the Magento commands for the installation of the plugin on your Magento server.

Once you install this field mapping addon, you can enable it to start mapping your Magento customer fields with your HubSpot contact properties.

To enable the Magento Field Mapping add-on, navigate to the HubSpot > Configuration in your Magento dashboard from the left menu bar.

At the bottom, you’ll see a drop-down named Enable HubSpot Contact Properties Mapping.

Click on this drop-down, select Yes, and save the change by clicking the Save Config button on the top right.

That’s all. You’ve successfully activated this HubSpot Magento Field Mapping addon.

Let’s move further down to see how this addon actually works.

Once you install the HubSpot Magento field mapping addon, you’ll see a Field mapping setting under the HubSpot section in your left navigation menu.

Click on Field Mapping and you’ll land on the addon page where you can select the fields you want to map.

Select your Magento customer fields and map them with respective HubSpot contact properties by selecting the appropriate field in front of it.

After you select the properties of your choice, click Save and your fields will be mapped successfully.

Note: This is only for the Magento customer fields we provide by default with our plugin. If you want to add your custom field for customers at your Magento store, please contact us.

You can map only your contact-related fields using this HubSpot Magento field mapping addon.

How do I enable this field mapping addon?

You can go to your Magento store dashboard and navigate to HubSpot > Configuration from the left navigation menu. At the bottom of the configuration window, you’ll see a menu named Contact properties mapping and syncing. You can enable this addon from this section.

HubSpot Shopline Integration connects your Shopline store with your HubSpot account so you can sync your store data and manage it over HubSpot CRM. With this app, you can sync your store data like Orders, Contacts, Products on HubSpot for easy data management.

Moreover, this app comes with multiple lists, custom properties and workflows that help you segment and automate your data. On top of that, you can use this Shopline app to forecast your sales, recover abandoned carts and more.

Here are some key features of HubSpot Shopline Integration:

• Sync Shopline Contacts, Deals, and Products over HubSpot CRM
• Workflows to automate daily repetitive tasks
• Smart HubSpot lists for perfect contact segmentation
• Track and recover abandoned carts
• Custom properties to sync special data over the CRM
• RFM Settings to rate your customers on their buyer behavior

• • To install the app, you need to go to either Shopline or HubSpot marketplace.
  • Install the app on your Shopline dashboard and then go to Apps in your Shopline backend and select HubSpot Shopline Integration. You’ll see the start screen of the app where you can start the set up from.
    
    

• Click on Connect Your Account and you’ll see a popup asking you to select the HubSpot portal you want to connect.
  
  
• Select the HubSpot portal you want to connect and click Choose Account.

• Once you select the account, click on Choose App and your account will be connected.
• After the account is connected, you’ll see the setup process where the first step is to create groups and properties.
  
  
  • Click on Create groups & Properties and all the custom properties this app comes with will start creating in your HubSpot CRM.
    
    

• Once done, click on Next Step to proceed.
• The next step is creating lists. Click on Create Lists to create all the lists this app comes with in your HubSpot CRM. You can later use these lists to segment your HubSpot data.
• The next step is to map your Shopline order statuses with deal stages. You can select a pipeline where you want to map your order status with deal stages.
  
  
• Once you select the pipeline, choose the deal stages and click Save to map them.
• After you map the order status successfully, you’ll see this kind of screen.
  
• Then, you need to select your plan. You can select either the Free, Beginner, Advanced, Ultimate to start with the app.
  
• You can also skip this part and select your plan later from the Plan section.

And you’ve successfully installed and set up this HubSpot Shopline integration.

Let’s look at the settings you get in this HubSpot Shopline integration to understand the workflow of this app.

• After setting up the app successfully, you’ll see this home page of the app. The home section is the dashboard of this Shopline app. You can see the details of all your Shopline data this app has synced over HubSpot CRM.
• You can see the number of Contacts, Deals(Orders), Products synced over HubSpot so far.

Note : If you deal with any issue related to data sync, connect with us and we’ll fix it.

• Every contact that registers on your Shopline store will be synced over HubSpot CRM. And this section shows all the contact-related details.
• You get 3 different tabs here. Let’s look into them:

• You can see the complete list of all the contacts that are synced to HubSpot CRM through this app. You can also select any record to sync it over HubSpot if it is not synced successfully.

• In this section, you can sync your Shopline contacts for a selected date range.

• This section shows the default mapping between your Shopline and HubSpot fields.

• Every order placed on your Shopline store will be synced over HubSpot as a deal. And this section shows all those deal-related details.
• You get 4 different tabs here. Let’s look into them:

• All the orders that are synced over HubSpot as deals will be displayed here. You can also select any record to sync it over HubSpot if it is not synced successfully.

• In this section, you can sync your Shopline orders for a selected date range as HubSpot deals.

• You can map your Shopline order status as HubSpot deal stages in this section.

• This section shows the default mapping between the deal-related Shopline and HubSpot fields.

• You can see all your products’ data here in this section. Every product you’ve created on your Shopline store will be synced on HubSpot CRM. And this section shows all your product-related details.
• You get 3 different tabs here. Let’s look into them:

• All your Shopline orders that are synced successfully over HubSpot CRM will be displayed here. You can also select any product to sync it over HubSpot if it is not synced successfully.

• In this section, you can sync your Shopline products for a selected date range.

• This section shows the default mapping between the product-related Shopline and HubSpot fields.

• This section contains some workflows you can directly create into your HubSpot CRM in one click. You just need to click on the Create button in front of the workflow and the workflow will be created in your HubSpot CRM.
• You can use these workflows for abandoned cart recovery, sending thank you emails, targeting repeat customers and more.

• This section contains different settings for this app. Let’s look into each of them:

This section contains 2 different settings:

• Enable two-way sync for contact tags: Enable this toggle to sync your contacts tags from HubSpot CRM to your Shopline store. For example, if you add a contact tag in your HubSpot CRM, by enabling this toggle, it will be synced over Shopline automatically.

• Enable abandoned cart sync: If you enable this toggle, your abandoned cart data will be synced over HubSpot CRM so you can create and run campaigns to recover them.

• RFM (Recency, Frequency, and Monetary) segmentation lets you give ratings to your customers based on their buyer behavior. This helps you segment your customers and target them with relevant content and offers. For example, you can use RFM segmentation to classify your high and low spenders and then create campaigns accordingly.

• This section shows all the custom properties this Shopline HubSpot integration creates in your HubSpot CRM once you install it.

Here’s the complete list of Groups and Properties you get in this HubSpot Shopline integration:

Order Information

• Last Order Status
• Last Order Fulfillment Status
• Last Order Tracking Number
• Last Order Tracking URL
• Last Order Shipment Date
• Last Order Number
• Last Order Currency
• Total Number of Current Orders

Products Bought

• Last Product Bought
• Last Product Types Bought
• Last Products Bought
• Last Products Bought HTML
• Last Total Number Of Products Bought
• Product Types Bought
• Products Bought
• Total Number Of Products Bought
• Last Products Bought Product 1 Image URL
• Last Products Bought Product 1 Name
• Last Products Bought Product 1 Price
• Last Products Bought Product 1 Url
• Last Products Bought Product 2 Image URL
• Last Products Bought Product 2 Name
• Last Products Bought Product 2 Price
• Last Products Bought Product 2 Url
• Last Products Bought Product 3 Image URL
• Last Products Bought Product 3 Name
• Last Products Bought Product 3 Price
• Last Products Bought Product 3 URL

Shopping Cart Information

• Shipping Address Line 1
• Shipping Address Line 2
• Shipping City
• Shipping State
• Shipping Postal Code
• Shipping Country
• Billing Address Line 1
• Billing Address Line 2
• Billing City
• Billing State
• Billing Postal Code
• Billing Country

Customer Group

• Customer Group/ User role
• Customer Source Store
• Accepts Marketing
• Marketing Newsletter
• Shopping Cart ID

Categories Bought

• Last Categories Bought
• Categories Bought

RFM Information

• Total Value of Orders
• Average Order Value
• Total Number of Orders
• First Order Value
• First Order Date
• Last Order Value
• Last Order Date
• Average Days Between Orders
• Account Creation Date
• Monetary Rating
• Order Frequency Rating
• Order Recency Rating

SKUs Bought

• Last SKUs Bought
• SKUs Bought

ROI Tracking

• Customer New Order
• Abandoned Cart Recovery Workflow Conversion
• Abandoned Cart Recovery Workflow Conversion Amount
• Abandoned Cart Recovery Workflow Conversion Date
• Abandoned Cart Recovery Workflow Start Date
• Current ROI Campaign
• Customer Re-engagement Workflow Conversion
• Customer Re-engagement Workflow Conversion Amount
• Customer Re-engagement Workflow Conversion Date
• Customer Re-engagement Workflow Start Date
• Customer Rewards Workflow Conversion
• Customer Rewards Workflow Conversion Amount
• Customer Rewards Workflow Conversion Date
• Customer Rewards Workflow Start Date
• MQL Capture, Nurture & Conversion Conversion
• MQL Capture, Nurture & Conversion Conversion Amount
• MQL Capture, Nurture & Conversion Conversion Date
• MQL Capture, Nurture & Conversion Start date
• New Customer Workflow Conversion
• New Customer Workflow Conversion Amount
• New Customer Workflow Conversion Date
• New Customer Workflow Start Date
• Second Purchase Workflow Conversion
• Second Purchase Workflow Conversion Amount
• Second Purchase Workflow Conversion Date
• Second Purchase Workflow Start Date
• Third Purchase Workflow Conversion
• Third Purchase Workflow Conversion Amount
• Third Purchase Workflow Conversion Date
• Third Purchase Workflow Start Date

Abandoned Cart Details

• Current Abandoned Cart
• Abandoned Cart Date
• Abandoned Cart Counter
• Abandoned Cart URL
• Abandoned Cart Products SKUs
• Abandoned Cart Products Categories
• Abandoned Cart Products
• Abandoned Cart Products HTML
• Abandoned Cart Tax Value
• Abandoned Cart Subtotal
• Abandoned Cart Total Value

• Like Workflows, this section contains multiple lists. You can create these lists in your HubSpot CRM and use them to segment your contacts. 

• This section shows the log details of all the data you’ve synced to HubSpot CRM using this app. These details let you keep track of the data this app has synced and help you track any data sync errors.

• The Activity section shows all the data sync activities that are ongoing as well as completed.

• This section shows all the details of your current plan. You can see your transaction history as well as upgrade or cancel your plan from here.

Cafe Delight is a HubSpot CMS-compatible premium theme that’s made for the coffee shack, burger cafe, bistro, bar, food truck, food chain, beverage place, food delivery, bakery, cakery, restaurant, hotel, dine-ins, canteen, or any food & drink website.

This cafe & bakery theme has the following features that will help you create the perfect HubSpot CMS website for your bakery & food services:     

• Fast food restaurant theme with responsive & interactive designs 
• SEO-friendly, lightweight, clean & modern HubSpot CMS website theme
• HubSpot homepages for bakery/pastry shop, food delivery & cafe
• Easy-to-use DIY theme settings that are highly customizable  
• Fully responsive multiple image option. Gallery 
• Lazy loading & elegant animation functions

Cafe delight can be a perfect companion for the online presence of your food delivery, bakery or cafe business. If you’re ready to buy this theme, we’ll offer you a 15m free customization & HubSpot theme consultation session with our HubSpot experts. Discuss all possibilities for the growth of your beauty business now!

We bring you continuous updates with our premium HubSpot themes, so you stay updated on your online font. Cafe Delight has multiple HubSpot website pages and landing page templates that help you in getting started with creating highly interactive & converting pages for your inbound website. 

This documentation gives you an idea about working with HubSpot themes. It helps you to configure modules and sections on your HubSpot CMS.

You can request for a free demo of our → Cafe DelightDemo to see how well it suits your interest. Additionally, we’re certified HubSpot developers. So, we’ll customize this theme perfect for your beauty website according to your needs. 

For purchasing the Cafe DelightHubSpot theme, you can directly navigate to the HubSpot theme marketplace from your HubSpot portal. HubSpot theme marketplace allows you to download free themes and buy premium HubSpot templates from different HubSpot-approved agencies.  

• Log in to your HubSpot portal > Click on Marketplace icon > Select asset marketplace > insert ‘Glambiz’ in the search portal > Click Buy button on the upper right > insert your email address > fill in your billing information > Click Payment Info

HubSpot marketplace accepts payments via credit cards and the preferred payment gateway is Stripe or Paypal. After your transaction is processed and completed, the Cafe Delighttheme assets are added to your HubSpot design manager.  

The templates and modules will appear for use in your HubSpot content under the same name as mentioned on the theme listing page.

After you purchase the theme, you need to install it and set it as your active HubSpot CMS theme.

Read More:  How To Install HubSpot CMS Themes or Change It? 

We highly recommend you create a child theme of the Cafe Delightbeauty & cosmetic HubSpot theme. As soon as you buy the theme HubSpot will prompt you to start editing the page templates of the CMS theme. However, before rushing into starting your newly designed pages, consider creating a child theme. 

Please Note
Setting up a child theme preserves the ability of the updates to be applied to the parent theme. This way you can customize the child theme on your portal as much as you want without affecting parent theme styles.

Once the theme has been purchased, you can  build up to 5 child themes with separate branding under the same account. Users of CMS Hub Enterprise can set up as many as 10 child themes.

• Open your HubSpot account > navigate to marketing > choose files and templates > select design tools
• Find the @marketplace folder for the Cafe Delighttheme > right-click on the Cafe Delighttheme folder > select create child theme > name the child theme
• If you want to change the child theme location, do so by clicking change in the File location section. Select a folder > click select
  

For making changes in the look and feel of your cosmetic & beauty HubSpot CMS website, you can directly edit the theme settings. These settings are a centralized location to make changes that reflect all over your website and landing pages. 

You can access the theme settings on the Cafe Delight theme in two ways:

• Settings  → Website → Themes → Cafe Delight child theme ( In case you’re just getting started and haven’t yet created any pages access the theme setting from the settings option)
• Marketing → Landing Pages → Page Editor  → Theme → Edit Theme Settings

Check out the theme settings added in the Cafe Delight Theme.

From the colors option of edit theme settings, you can change the global display of colors on your website. You must have a brand that follows a particular color scheme. This is the place where you can experiment and decide on your brand colors.

• Primary colors are a very important part of color theory. Red, yellow & blue are highly preferred primary colors. You can choose from the color palette provided.  
• Accent colors make certain sections louder and different than others. These usually complement the primary colors.
• Heading colors that will show up on different headings on your website pages like h1,h2,h3, etc.
• Body background colors are added behind the elements as backgrounds. The white body background color is highly recommended.
• Link colors appear as you see the hyperlinked text on your landing pages.  
• Links hover color is visible when you hover over a hypertext. Basically, the hover link color is visible only if the user will hover over the text.

Fonts are different types of writing styles. It helps you separate headlines and content just by looking at them. There are more than 100 fonts than can be used on your HubSpot CMS website. With Cafe Delight you can choose between google fonts or external fonts.

Besides, you can select different fonts for mini titles, headings, and body along with their colors.

You can arrange the letters of the text in such a fashion that the user can read it clearly and find it visually appealing. 

Colors and fonts are one way to make it so. However, typography on your website also involves selecting fonts, adjusting letter spacing, and line height for desktops, mobiles, and tabs. 

These settings will be added over to the h1,h2,h3,h4,h5,h6, body, mini title, etc.

Buttons are a crucial element on your website landing pages. For users, it is an action point. You need to make buttons highly convertible. We have added buttons in different sections so you don’t have to worry.

We have added a dark and light variant of outlined and filled buttons. From the buttons option of the theme settings, you can edit the font text & color, and change the background & border color for various states of buttons like active, hover & normal.

Forms are essential for the collection of customer data. Big or small, your food business benefits highly from this collected data. While using forms on the Cafe Delight theme, you can edit the title, background, border style, and corner radius for various form elements like title, help text, form fields, labels, error messages, etc.

Adding tables on your website helps you organize data clearly and helps users differentiate between things mentioned. If you’re adding tables to your landing pages, you can edit the text & background color of the table header, footer, cells, and body.

Website header options from the theme settings let you change a series of stuff like enabling header top and header bottom through a toggle button.

You can change the header menu background color, header background color, menu container background, and menu item border color. You can also add box shadow.

The header menu is also editable. While you will find additional settings on the header module. But, from the theme settings, you can change the menu items text font type and font color.

The website footer is at the bottom of any website page. The Cafe Delight theme offers easy customization of the footer. You can change the footer background color.

Other settings include changing the text font, color, line height & text transformation on the website footer for desktop.

For mobile devices, you can change the font size and line height of the website footer.

Website footer also has an editable menu. Plus you can alter text and color settings too.

Spacing settings deal with the spacing on your website pages in terms of containers of the content width, and horizontal & vertical spacings of sections on mobile, tablets, and desktops.

You can adjust the maximum content width of your website page. All the changes you make here will reflect on your website pages.

Certain global settings on your blog page can change the user experience considerably. You can enable, disable, and edit the blog sidebar. 

Cafe delight sidebar widgets includes topics, subscription form  and popular posts. Enabling or disabling them is under your control.

The blog post option is generally for changing settings on the blog page. You can change the blockquote border & text color and enable or disable either of these anytime:

• Author name
• Timestamp
• Tags
• Related posts
• Comment form 

System pages are automatically displayed pages that carry out common tasks like event registration and login. By placing modules on the page or editing already-existing content, system pages can be made more unique.

From the theme settings, you can change the general look of the system pages. For example, for every system page present on your website you can enable or disable its error image, remove or replace the same, edit alt text, and change the image loading style from browser default, eager, or lazy. 

Note: “Lazy” loading defers loading this element until it’s visible on the page. This may help improve site performance. “Eager” loading loads the element right away.   

The scroll-to-top feature allows users to easily and quickly get back to the top of the page by using a button.

You can enable or disable the scroll to the top button anytime. Besides you can set the icon color, icon background color, and adjust the icon corner radius of the scroll to top button.

As you must have read above, theme settings have options to make changes in the header and header menu. However, there are certain modules that you can add and make navigation on your website easier via header.

• From the edit page menu > go to content tab > website header > click on it > select open in global content editor. 

All used global content modules will appear on this page. We have used, a logo, menu, header toggler, and header controls in our website pages template. Simply select the global content module one by one and edit its settings accordingly.

A website footer is at the end of a landing page. It is also a global element that affects all the assets on different web pages when changes are applied to it. 

To edit your website footer, navigate in the following way:

• edit page menu > go to content tab > website header > click on it > select open in global content editor.

All used global content modules will appear on this page. You can use logo, social follow labels, social links, footer navigation, copyright, and scroll to top on your website page template. Simply select the global content module one by one and edit its settings accordingly. You can edit the styles of these modules too.   

Read More: How to edit global modules?

The Cafe Delightbeauty, spa, and cosmetic HubSpot theme has 34 highly customizable drag-and-drop modules. You can experiment with any module the way you like. Each module has styling options too. Keep reading to find out about each module.

Read more: What are HubSpot modules & templates?

To show vast sections of text like displaying content in form of questions and answers, you can use the accordion module. You can edit the accordion module as you wish like modifying the heading & background colors, borders and shadows, adjusting the height for different devices, etc.

As the name suggests, this module lets you add an animated image to your website pages. You can replace or remove any image you like and further adjust its dimensions.

The first thing that the users notice when they land on your website page. You can use it on your home page or about us page to inform visitors about your marketing or other services. You can select the layout you want from the different options available. Make the most of its style tab settings.

    (a) Banner with Image

(b) Background Image

(b) Background Color