Web Widget Options
Configuration options can be changed in the Advanced Config Editor of the Web Widget integration in Web1on1, or via the initilaziation call of the widget as exampled here
The following options are available:
Language related options:
Suported Languages
The widget supported languages are nl, fr, de, en or pt. If no language is configured, it will use English (en).
language
Set language hard (do not look at browser language) to one of our supported languages.
"language": "fr",fallbackLanguage
if set to one of our supported languages, set widget language to the browser language if it is one of our supported languages. If the browsers language is not supported, us this fallbackLanguage.
"fallbackLanguage": "fr",languageFromUrl
If set to true, will try to get language from the website url.
For example: https://site.com/nl/bla/ would match nl and set the language to nl. if nl is in the list of supported languages.
"languageFromUrl": true,customText
All strings can be adjusted via the customText node. There are so many of them that there is a whole chapter on them.
"customText": { "headerText": "Open me for help" },would change the headerText for all languages
customText.nl.headerText
Per supported language you can overrule text.
"customText": { "pt": { "headerText": "Olá, abra-me para ajuda" } },would change the headerText for Portugues.
customColors
customColors can be used to change the default colors brandColor, conversationColor and actionColor
"customColors": {
"brandColor": "65758e",
"conversationColor": "0099ff",
"actionColor": "0099ff",
},All values Must be a 3 or 6-character hexadecimal color.
Interface related options:
style.body
This json structure can be used to add some css to the customers website and is used to adjust the widget position and size to the pixel or changing the shoutout (the chat bubble above the widget when closed) colors. The json object is transformed into css and injected into the main document of the website, For example, to change the shoutout colors, you could do this:
"style": {
"body": {
"#web-messenger-shoutout": {
"color":"#C3002F",
"border":"1px solid #C3002F"
}
}
},the comma at the end is for copy and paste convenience.
Or changing css for a certain media query:
"style": {
"body": {
"@media (max-width: 1200px)": {
"#web-messenger-shoutout.smooch_button": {
"z-index": "1000",
"bottom":"135px"
}
}
}
},style.frame
This json object is transformed to css injected in the widget's iframe. It can be used to adjust any css within the widget If you would like to remove the header (with the company info) completely from the widget, you could use this style.frame setup:
"style": {
"frame": {
".intro-pane": {
"display" "none"
}
}
},You can find which css element you need with the inspector mode of chrome or firefox, etc.
You can also provide an url key pointing at an publicly available style sheet url. like this:
{
"style": {
"frame": {
"url": "https://yourdomain.com/styles/widgetframe.css"
}
}
}You can even combine both examples above...
patchChannels
If set to true, removes the text '....is my code, I want to continue my conversation on WhatsApp' from wa and facebook connect page.
"patchChannels": true,cardClickText
Text to appear in carousel card after clicking it to. This will profide some feedback that you have clicked it already to prevent poeple clicking it many times.
"cardClickText": "you choice",companyImageUrl
Company url of organization in Web1on1| Used as image in header + everywhere agentImageUrl is used but missing. If left untouched it will use the url of the icon configured in the organization.
"companyImageUrl": "https://some.domain/some/image.png",disclaimerText
Change/Set the disclaimer text shown at the bottom of the widget. Set to an empty string "" to disable (defaults to the text disclaimer)
"disclaimerText": "our disclaimer",disclaimerUrl
Change the link behind the disclaimer text.
"disclaimerUrl": "https://some.domain/some/webpage.html",poweredByText
Change Messaging by Web1on1 at bottom of Chat Window.
"poweredByText": "Magic Messaging",poweredByUrl
Change the link behind the poweredByText text.
"poweredByUrl": "https://some.domain/some/webpage.html",buttonImage
Change image of button. Should be a http link to a jpg/png or svg.
"buttonImage": "https://some.domain/some/image.png",buttonWidth
When the displayStyle is button, you have the option of specifying the button width.
"buttonWidth": 150,buttonHeight
When the displayStyle is button, you have the option of specifying the button height.
"buttonHeight": 150,barWidth
Force width of the bar/tab
"barWidth": 300,barHeight
Force height of the bar/tab
"barHeight": 80,orientation
Used to place the bar/button. bottom right, bottom left, top left and top right. defaults to bottom right
"orientation": "bottom left",fullscreen
When widget opens, it opens fullscreen.
"fullscreen": true,showConnectNotification
When a contact starts a conversation, the system can invite the contact to connect to other channels. Is not show by default.
"showConnectNotification": false,shoutout options:
shoutout
Shoutout works on mobile (button) after openAfter has passed. On desktop if set to true, will open the shoutout immidiately and open the widget after openAfter has passed.
"shoutout": true,customText.shoutoutText
Shoutout text to use (overruling default text)
"customText": { "shoutoutText": "Need help?" },shoutoutAgent
Shoutout agent icon can be set to "male smiling-number between 1 and 40" or "female smiling-number between 1 and 39"
"shoutoutAgent": "female smiling-23",shoutoutNumber
The number that will appear in the shoutout. Defaults to 1.
"shoutoutNumber": "2",shoutoutCircleColor
Shoutout circle number color
"shoutoutCircleColor": "#efd",theme (depricated, use style.body instead)
Shoutout close icon can be set by setting theme to dark or light
"theme": "2",fakeAgents
Instead of having the normal header in the conversation window, you will see fake agents. they shift every minute to mimick activity
"fakeAgents": true,eyeCatcher
replaces the default shoutout
Url of the image that is used as eye catcher above the widget.
"eyeCatcher": "https://some.domain/some/image.png",eyecatcherOffsetTop
offsetTop for the eyeCatcher
"eyecatcherOffsetTop": "10",eyecatcherOffsetLeft
offsetLeft for the eyeCatcher
"eyecatcherOffsetLeft": "10",eyecatcherAnimation
animation to use (see [Animate CSS](https://daneden.github.io/animate.css/ for all available animations)) defaults to fadeIn.
"eyecatcherAnimation": "fadeIn",or just design the widget button yourself
You can also as a company choose to design a completely different look for the widget bar or button and just use hide and rehide and open the widget yourself by using the widget api like this: window.web1on1.api.openWidget()
Other settings
cookieLivetime
The amount of minutes the cookies are stored on the client. After this time they will be removed and if a customer returns after that time, the widget will start a new session. Any previous conversation is lost. If in the new conversation the consumer again is asket for their phone nr or email, Web1on1 will recognise that it is the same consumer talking and will offer the Agent that is talking to to consumer to merge both conversations into one conversation. accepted values are 5, 15, 30, 60, 720, 1440 and 43200
"cookieLivetime": 60,initAfter
Sometimes you want the widget to load a bit later to give the customers website time to load. https://developers.google.com/speed/pagespeed/insights will show that our widget loads a substantial amount of data. Altought we cannot prevent the data from being loaded and executed, we can postpone it a bit. This way insights is happy (and the customer) and the widget gets loaded a bit later. It might even give it more attention this way as the rest of the site is passive at the point.
"initAfter": 5000,openAfter
Automatically open the widget after x seconds. setting to false will disable it. defaults to 15 seconds. This is used to give the widget extra attention.
"openAfter": "5",openAfterAnimation
In button mode, the animation to show after the openAfter period. find all animations here
"openAfterAnimation": "bounceInDown",customText.agentWelkomMessage
When this text is configured (in any language as explained here), when the widget auto opens after the configured seconds, we will insert this welkom text as an agent. This will give the impression the agent is there already.
"customText": { "agentWelkomMessage": "Hi there, how can we help?" },agentName
Name of the agent to use when sending the welcome message after auto opening the widget
"agentName": "john",agentImageUrl
Used this agent icon http url for all Agents messages. If not configured the Web1on1 system will provide a icon.
"agentImageUrl": "https://some.domain/some/john.png",disableErrorHandling
Disable sending Widget Errors to our Error reporting system.
"disableErrorHandling": trueIt is not recommended disabling the error handling. this way we will know if the widget has problems running on your website.
touchpoints (depricated, use desktop.hide or mobile.hide or tablet.hide instead)
Where will the bundle be active (['web', 'mobile', 'tablet']), defaults to all platforms.
"touchpoints": ['mobile']showConnectNotification
Show connect notification bubble (not the header, but the bubble text after first message). defaults to false
"showConnectNotification": true,hide
if set to true hides the widget until it is opened by clicking a button/div (see openByIds/openByClass)
"hide": true,or hide on mobile (also have a look here
"mobile": { "hide": true },rehide
if set to true, in combination with above hide setting rehides the widget when it is closed by the customer.
"rehide": true,spa (Single Page Applications)
if set to true, it will detect page changes in a different way and remerge and reapply the settings on a change.
"spa": true,originWhitelist
By default this is not set and means the widget can run on any web site. (this is the save default). If you want to restrict where the widget can be loaded you can use originWhitelist.
"originWhitelist": ["https://yourdomain.com", "https://yourotherdomain.com"],Be aware that when you use this feature, you need to update this list the moment you add your widget to a new domain, otherwise you will be searching for the reason why it is not loading on the new website :)
Overruling settings for mobile, tablet, desktop
You can set overrule any setting mentioned above for mobile or tablet by specifying the same setting under settings.mobile.<setting> or settings.tablet.<setting>
Example changing header text on mobile:
"mobile": { "customText" : { "headerText": "hello mobile user, how can we help" } },Example disabling the widget on mobile:
"mobile": { "hide" : true },Example changing from bar to button on mobile:
"mobile": {
"displayStyle": "button",
"buttonWidth": "40px",
"buttonHeight": "40px",
"buttonImage": "https://icons-for-free.com/iconfiles/png/512/chat+icon-1320184411998302345.png",
"style": {
"frame": {
"#messenger-button > img": {
"width": "40px",
"height": "40px"
}
}
}
}Overruling settings for specific webpages of customer
You can overrule settings for a customer by defining an urls array setting with an url that can be a full or partial match (regexp) and all settings you wish to overrule for that page (or all pages that match the partial string or regexp)
Example config file with urls key to match specific customer url:
{
"urls": [
{
"url": "/cars/",
"shoutout": true,
"customText": {
"shoutoutText": "Chat about cars with us"
}
}
]
}all webpages of customers website matching /cars/ will see Chat about cars with us as the shoutoutText