Create and customize a mobile chatflow

You can create a mobile chatflow in HubSpot and use the mobile chat SDK to integrate HubSpot's chat functionality into an iOS or Android app. With the mobile chat SDK, you can provide a contextual support experience and leverage other HubSpot self-service features such as integrating a bot or knowledge base into your chat experience.

In this article, learn how to set up and customize your mobile chatflow in HubSpot. If you've already created your mobile chatflow, learn how to integrate a HubSpot chatflow with a mobile app.

Create a mobile chatflow

To create a mobile chatflow in HubSpot that will integrate with the mobile SDK:

1. In your HubSpot account, navigate to Service > Chatflows.
2. In the top right, click Create chatflow.
3. Click Mobile.

4. Click the top dropdown menu to select a specific help desk or inbox to associate the chatflow with.
5. Click the language dropdown menu and select a language.
6. Enter a mobile tag:
   • A mobile tag is required for HubSpot to determine which chatflow you want to display in your app. Your developers should include this tag in the associated configuration file of your app to allow your chatflow to be properly identified.
   • Multiple chatflows can share the same mobile tag. If this occurs, the chatflow with the highest priority level will appear in your app. Learn more about adjusting the priority of your chatflows in this article.

7. Click Next.
8. On the Chatflow page, select the type of chatflow:
   1. Live agent: visitors can immediately start a chat with you and your team via your app.
   2. Customer agent: visitors can chat with with a customer agent powered by Breeze, HubSpot's AI. The customer agent uses your HubSpot content, public URLs, and files to answer users' questions. Learn more about the customer agent.
   3. Rule-based Chatbot: visitors can chat with a bot, which gathers initial information and carries out specific tasks, such as booking meetings, before a member of your team takes over the conversation. You can start from scratch, or select a template. Learn more about rule-based chatbots.
9. Click Next.
10. On the Knowledge base page, you can add the knowledge base browse search bar to your live chat:
    • Toggle the Enable Knowledge Base search switch on.
    • Click the Knowledge Base dropdown menu to select or create a knowledge base. Learn more about knowledge base browse and search in live chat.
11. Click Create.

Customize chat settings

Once you've created your chatflow, you'll be redirected to the Chat tab of the live chat setup. Customize the live chat behavior and create a welcome message that'll greet your visitors.

Please note: if you want to embed a chat widget on your single-page app or customize your live chat using an API, learn more about using the HubSpot conversations API in HubSpot's developer documentation.

Assignment

• To route incoming conversations to specific team members, click Automatically assign conversations to expand the section, then click to toggle the Automatically assign conversations switch on. Use the dropdown menus to select which users or teams to assign the conversations to. Learn more about setting up routing rules in your conversations inbox or help desk.

Please note: only users with assigned Sales Hub or Service Hub paid seats can be included in your routing rules.

Personalize

• To customize the message that appears when a visitor first starts a chat, click Welcome message to expand the section then enter text in the Write a welcome message text box. Learn more about changing the welcome message language.
• To specify when visitors should be asked to provide their email address, click Email capture to expand the section. Click the Ask visitors for their email address dropdown menu and select an option, then enter the message to display when a visitor is asked for their email address.

Display

• Click to expand the Choose chat avatar section, then click the Chat heading dropdown menu and select the name and avatar to appear on the chat widget.

• • Custom branding: display a generic team name and image.
    • Click the add plus icon to upload an image or GIF, and enter the name to display.
    • To apply the custom branding throughout the entire chat conversation instead of the user's name and avatar, select the Use custom branding throughout the conversation as an alias for agents checkbox. Custom branding will also appear in the chat transcript.
    • In the Chat display behavior section, control the widget's behavior on desktop or mobile screens.

• Click to expand the Show/Hide close button section. When toggled on, visitors will see an X in the top right corner of the chat, which they can click to hide the chat widget.
• To continue, click Save at the bottom, then click the Knowledge Base tab.

Turn on knowledge base browse and search (Service Hub Professional or Enterprise only)

On the Knowledge Base tab, you can a Help tab to your live chat, allowing visitors to browse and search your knowledge base articles:

• Toggle the Enable Knowledge Base search switch on.
• Click the Knowlegde Base dropdown menu and select an existing knowledge base.
• To create a knowledge base, click Add a knowledge base and follow the steps. Learn more about creating a knowledge base in HubSpot.
• To continue, click Save at the bottom, then click the Target tab.

Manage chatflow options

On the Options tab, customize your live chat's language settings. If you've turned on data privacy settings in your account, you can also customize your live chat to include a step to ask your visitors for their consent to communicate.

• Click the Select a language dropdown menu and select a language preference for your contextual widget data, then click Save.

• If cookie consent is turned on, choose when to display the consent banner:
  
  • To display the consent banner before a visitor starts a chat, select the Show consent banner before visitor starts a chat radio button.
  • To display the banner when the visitor starts to leave the page, select the Show consent banner to visitor on exit intent radio button.

Please note: data privacy settings for consent to collect cookies will not show within the chat widget to visitors who have been identified through the Visitor Identification API. This is because HubSpot will not drop the messagesUtk cookie. The analytics cookie banner will not be impacted. Learn more about the Visitor Identification API in HubSpot's developer documentation.

• To capture visitors' consent to process their data, click to toggle the Consent to process data switch on.
  • Click the Consent type dropdown menu and select one of the following:
    • Require explicit consent: visitors need to click I agree before they can send a message.
    • Legitimate interest: visitors' consent is implied when they start to chat with you. The consent to process data text will still display, but they do not need to click I agree to start the chat.
  • In the Process consent text field, HubSpot's default text will appear. You can edit the text to explain why you need to store and process the visitor's personal information. If you customize the consent text but then want to return to the default text, click Reset to default text provided by HubSpot.
• To opt a visitor into a subscription type when they start to chat with you, click to toggle the Consent to communicate switch on.
  • Click the Subscription type dropdown menu and select the subscription type you are opting your visitors into.
  • Use the Checkbox label text field to inform customers what type of communication they're consenting to.

Please note: while these features live in HubSpot, your legal team is the best resource to give you compliance advice for your specific situation.

• If you have access to marketing contacts in your account and you want contacts created from this chatflow to be set as marketing contacts, click to toggle the Marketing contacts switch on.
• You can send a customer satisfaction survey from within the chat widget. When a chat conversation ends, the survey will appear in the chat widget. As survey responses are collected, they will appear in the survey details page and in the thread in the conversations inbox or help desk.
  
  • In the Collect feedback from chat visitors section, click the Connect existing survey dropdown menu and select a survey. You can only connect an existing survey that has Chat selected as the delivery method.

• • To create a new survey to connect to the bot, click Create new survey and make sure to select Chat as the delivery method.

• Click Save.

Mobile details

Preview and turn on your live chat

When you're done setting up your live chat, in the top right, click Preview to review how your live chat will appear on your mobile app. Toggle the switch on to turn on the live chat. If you are ready to start chatting with your visitors, learn how to respond to incoming messages in your conversations inbox or help desk.

Edit your chatflow

1. In your HubSpot account, navigate to Service > Chatflows.
2. Create a new chatflow or hover over an existing chatflow and click Edit.
3. Navigate between the Chat, Knowledge Base, Options or Mobile Details tabs to edit your chatflow.
4. Once you're done, click Save in the bottom left.

Integrate your chatflow with a mobile app

After you’ve created a mobile chatflow in HubSpot, you can use the mobile chat SDK to integrate HubSpot's chat functionality into an iOS or Android app. Learn how to integrate a HubSpot chatflow with a mobile app.