Customization on iOS SDK
- Getting Started
- Bot Building
- Smart Agent Chat
- Conversation Design
-
Developer Guides
Code Step Integration Static Step Integration Shopify Integration SETU Integration Exotel Integration CIBIL integration Freshdesk KMS Integration PayU Integration Zendesk Guide Integration Twilio Integration Razorpay Integration LeadSquared Integration USU(Unymira) Integration Helo(VivaConnect) Integration Salesforce KMS Integration Stripe Integration PayPal Integration CleverTap Integration Fynd Integration HubSpot Integration Magento Integration WooCommerce Integration Microsoft Dynamics 365 Integration
- Deployment
- External Agent Tool Setup
- Analytics & Reporting
- Notifications
- Commerce Plus
- Troubleshooting Guides
- Release Notes
Table of Contents
Customization
The SDK can be configured in a variety of ways to fit in seamlessly with the overall experience of the parent application.
@objc public var primaryColor : String @objc public var fontSize : String @objc public var typography : String @objc public var enableTypingSuggestions : Bool @objc public var hideComposer : Bool @objc public var noHeader : Bool @objc public var privacyPolicyUrl : String @objc public var headerText : String @objc public var initializeLanguage : String @objc public var composerPlaceholder : String @objc public var hidesTabBar : Bool = false @objc public var loaderEnable : Bool = true @objc public var loaderMessage : String @objc public var loaderAnimate : Bool @objc public var loaderColor : UIColor?
Example -
let customSetting = HPCustomBuilder.build { (builder) in builder.composerPlaceholder = "Type message...." builder.noHeader = true builder.privacyPolicyUrl = "https://policies.loremipsum.com/privacy?hl=en-US" builder.initializeLanguage = "hi" builder.loaderAnimate = true builder.primaryColor = "#420420" } HPKit.sharedSDK.setCustomSettings(settings: customSetting)
Primary Color
The primary color is used throughout the SDK. This should ideally be the same as your brand's primary color.
default: #00758a
Background Color (For Tablet Mode)
Modify the value of tablet-bg-color to change the background fill color. Please note that this is only for tablet mode.
default: #EDEEF4.
Font Size
The base font size is used throughout the SDK. It is recommended to leave this unchanged.
default: 16px
Typography
The font family is used throughout the SDK. It must be a google font. You can see available fonts here -https://fonts.google.com/
default: Roboto
Enable Typing Suggestions
Enables typing suggestions for the bot. Typing suggestions are autocompleting suggestions that show up for users when they type. This gives the user some context around the capabilities of the bot.
default: false
Hide Composer
Hides the composer so that the user is not given the option to type anything. This is useful when building actionable and highly directed bots.
default: false
No Header
Hides the chat window header. This is useful when you developer want to hide the header
default: false
Privacy Policy URL
If GDPR is enabled, you can add a URL to your Privacy Policy page through init settings. Users will be redirected to this URL when they click on the link in the GDPR view. If not provided users will be redirected to Haptik's privacy policy page
Header-Text
The text that's displayed on the chat header and the intro screen for first-time users.
default: Haptik
Initialize Language
Code of language you want to open bot with. For eg en, hi. (Optional). We support ISO_639-1 language codes.
default: en
Composer Placeholder
The placeholder text for the composer (typing area). This is the text that's shown in the typing area when it's empty
default: Type here...
Loader Message
Text to be displayed on the loading screen. This is useful when you have a custom message for the loader
default: Loading...
Loader Animate
This will animate the loading indicator with multi-colored animation
default: false
Loader Color
This is useful when you want to display loader in a different color than the bot's primary color
default: primary color
Navigation bar Title
You can optionally set the title for the navigation bar using the 'title' property.
HPKit.sharedSDK.title = "Your_Title"
Launch Message
You can launch the Bot with a task or message on behalf of the user. Haptik provides the following methods for doing so.
HPKit.sharedSDK.setLaunchMessage(message: "Your_Message", hidden: true, skipMessage: true, hideWelcomeMessage: true)
You need to set a launch message before you call loadConversation()
Params:
- message <String>: The message that is to be sent
- hidden <Boolean>: Whether to send the message as a hidden user message. A hidden message is not visible to the user but can be seen by the agent or bot.
- skipMessage <Boolean>: It is an optional parameter. If set to true, the SDK will not send a launch message if the last message is a reply to a previous launch message.
- hideWelcomeMessage<Boolean>: If set to true, the Welcome Message will not be shown when the launch message is sent.
Update Custom User Data
In case you want to update your custom data anytime during an active conversation, Haptik provides a function to do it dynamically.
Payload Structure
- Custom Data(Optional): This key takes a dictionary as an input to save custom data in BE.
- User Data(Optional): This key takes a string as an input to update the user's name.
- Mobile No. (Optional): This key takes a string to update the user's contact info(mobile).
- Email(Optional): This key takes a string to update the user's contact info(email).
Payload format
let customdata: [String : Any] = ["UserUpdate1":"String", "UserUpdate2":55556, "UserUpdate3":false] let hpPayload: [String : Any] = ["custom_data":customdata, // Your user data dictonary "username" : "customTest" //"mobile_no":"9888776665", (Optional) "email":"test@haptik.ai"]
Sync your data dynamically
HPKit.sharedSDK.updateUserData(data: payload)
CSS Customizations
A custom CSS file can be injected into the SDK, which will allow modifying the styles of the conversation screen. This parameter takes a URL path of the CSS file.
HPKit.sharedSDK.setBusinessCSS(url: "your_custom_css_url")