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:

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.

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.

{
    "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": true

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"],

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"
            }
        }
    ]
}