Configuration and Settings

Drift Privacy Policy

Drift respects privacy rights and data protection laws. You may only share other people's personal information with Drift, whether directly or through third-party integrations, if you are permitted to do so under applicable law. Drift Privacy Policy

With the API you can also control many aspects of the widget configuration. Call drift.config with one or more of the options described below to change the widget's configuration for that session.

First, Initialize the Drift Widget

<script>
drift.on('ready',function(api, payload) {
 // your code goes here
})
</script>		
<script>
analytics.ready(function(){
    //your code goes here
})
</script>

Drift Config Example

<script>

  drift.config({
   locale: 'en-US',
    messages: {
     welcomeMessage: 'Hey there!',
      awayMessage: "Hey, we're not here right now, but leave a message.",
      emailCaptureMessage: "Leave your email so we can get back to you.",
      thankYouMessage: "Thanks we'll follow up soon."
    },
    enableWelcomeMessage: false,
    enableCampaigns: false,
    enableChatTargeting: false,
    backgroundColor: '#000000',
    foregroundColor: '#ffffff',
    activeColor: '#00ff00',
    textColor: '#ffffff',
    autoAssignee: {
      name: 'Trevor Rundell',
      title: 'Engineer',
      email: 'trevor@example.com',
      avatarUrl: 'https://s.gravatar.com/avatar/...',
    },
    inboxId: 1,
    cookieDomain: '.example.com',
    welcomeMessageDelay: 5000,
    disableNewConversations: true,
  })
  
</script>	

locale - An IETF language tag (usually a combination of language and country codes). overrides the language specified in your settings.

enableWelcomeMessage - true will allow the welcome message popup to happen while you're online. false will prevent it from popping up. overrides the "show welcome message teaser" setting.

enableCampaigns - false will disable enrollment in / display of any browser targeted campaigns. Default is true.

enableChatTargeting - false will disable any chat targeting "display when" rules defined in your settings. Default is true.

backgroundColor, foregroundColor, activeColor, textColor - Override the four colors described in this help doc.

autoAssignee - Sets the default user that is shown in all welcome messages. If you specify at the email field new conversations will automatically be assigned to the team member with that email address. Overrides any "helping team members" defined in your settings.

cookieDomain - Change the domain that the widget will read and write identification cookies from. Defaults to the current domain, but can be used to set cookies on a more generic domain instead. See this help doc for more info.

inboxId - Override the default inbox for conversations created by the widget.

welcomeMessageDelay - The amount of time (milliseconds) to wait before popping up the chat widget or welcome message if it's enabled. Defaults to 5000 (5 seconds). You can always increase or decrease this number to have the widget popup faster or slower on your site.

messages - Override any custom messages set within the app. By default these will be set to the localized default for the selected locale. Note that these will not affect any messages sent by the bot.

welcomeMessage - Text shown on the welcome message popup.

awayMessage - Text shown on the away message popup.

thankYouMessage - Text shown after the user has started a conversation via the away message.

emailCaptureMessage - Text shown on the lead email capture form.

disableNewConversations - disallow site visitors from composing new messages via the compose button in the widget

Custom css styles

You can alter the CSS class for the widget. Below, we list the class names for different states of the widget and welcome messages.

Definition: ClassName

HIDDEN: 'drift-widget-hidden'
TAKEOVER: 'drift-widget-takeover'
SIDEBAR: 'drift-widget-sidebar'
WELCOME: 'drift-widget-welcome-online'
WELCOME_EXPANDED: 'drift-widget-welcome-expanded-online'
AWAY: 'drift-widget-welcome-away'
AWAY_EXPANDED: 'drift-widget-welcome-expanded-away'
SLIDER: 'drift-widget-slider'
WIDGET ICON: 'drift-widget-container'

For example, if you wanted to move the widget up 80 pixels, you would add a new style section after the install snippet.

iframe is the tag, #drift-widget is the ID, and .drift-widget-welcome-online is the class.

drift.load(....);
</script>
<style>
	iframe#drift-widget.drift-widget-welcome-online {
  	bottom: 80px !important;
	}
</style>

Configuration and Settings