- - Knowledge base overview
Product Updates
Events
Groups
Drift Insider

Home
Community
Drift Chat Platform
Widget

Widget

Let's talk about your little bot in the corner!

18 Topics
21 Replies

When you subscribe we will email you when there is a new topic in this category

18 Topics

Recently active

Most replies Most views Newest first

Jaclyn VanDrifter

posted in Widget

Configuring Drift for Single-Page Applications (SPAs)

Let's talk about SPAs (aka single-page applications). A SPA is a website that loads a single document and overwrites the existing page with new data from a web server rather than reloading pages individually from scratch. Essentially, SPAs enhance the overall speed and responsiveness of a website. Is your website built on a SPA? If so, you might have noticed the Drift widget/playbook does not reload when you visit different pages on the site. Because Drift fires on page load, SPAs will prevent you from changing the playbook experience as site visitors navigate to new pages. Fortunately, you can manually configure Drift to do this by updating the Drift code. Good news - our technical team wrote the code you will need.The custom code is called drift.page. When implemented, it tells Drift that a visitor has navigated to a different page on the site. The drift.page code enables customers using SPAs to fire different playbooks (as visitors click to new pages on the site). The drift.page cod

1 month ago

MarieNew Participant

asked in Widget

KateNew Participant

asked in Widget

The Drift widget started crashing after the visitor sent the first message

Greetings!We observe the incorrect behavior of the widget. When the visitor sent the first message, the widget window disappeared and there was only one button in the form of a circle with the dialog closing. But there is no dialog... when you click on the cross button - the button changes its appearance to a regular circle with dialog icons, but there are no changes with the dialog box - it simply DOES NOT.Whats happening?P.S. the same behavior on both projects where we use Drift

5 months ago

Whitney CovelliDrifter

posted in Widget

Unable to Type in the Text Box of the Widget

Customer reached out because a website visitor was unable to type in the text box while they were having a conversation with a rep. The site visitor said they could only attach an image but they couldn’t type.

6 months ago

Nic BrownCommunity Manager

published in Widget

Setting up the Drift Widget

Playbooks are great way to proactively engage with your site visitors, but you may not have a Playbook on every page of your site or you may want your users to click the widget to initiate a conversation with you.The Default Greeting is a reactive greeting or message that shows when the widget is clicked on on a page where no Playbook is set to fire or is what is displayed to a visitor who does not meet any of the targeting conditions of your Playbooks.The Default Greeting is available on all plans and is always on and can’tt be disabled. It's there to make sure that visitors can always start a conversation with you, even if they don't receive a Playbook. To configure your Default Greeting, go to Settings > App Settings > Drift Widget.Next, click into your widget and select the "Visibility" tab.In order to edit your default greeting you need to make sure your widget is set to display to your users. Accessing your Default Greeting will be a little different if you are participatin

7 months ago

Nic BrownCommunity Manager

published in Widget

How to Hide the Drift Icon when offline

You can Hide the Drift Icon when you’re not online.Billing: Display targeting is only available on our paid plans.You can set this up in your Drift account by: Going to your Settings Click on Drift Widget And click into your widget On your "status" page, you'll want to set the hours to your Drift widget! (You can also manually turn your widget on and off as needed if you prefer.) Once your hours are set, you can create a new Display When condition, by going to Advanced targeting settings. When you select Create new display rule you'll want to match the screen shot below. This will ensure that your Drift icon will only display when you're online.

7 months ago

Anton TestNew Participant

asked in Widget

Show custom "Chat" button only if there is an active playbook

Hi! I am trying to build a custom “Chat” that opens the Drift widget. I want to show the button only if there is an active playbook for the current context. I used something similar to this example: https://devdocs.drift.com/docs/widget-start#code-exampleThe main difference is that I wait for the conversation:playbookFiredevent to show the custom button that will toggle the widget. This isn’t reliable, as this event doesn’t fire on subsequent visits if the user has already interacted with the playbook. Could you suggest a workaround? My end goal is to show the custom “Chat” button only if there is an active playbook for the current context.

7 months ago

Anton TestNew Participant

asked in Widget

Embedding Conversational Landing Pages instead of the chat widget

Hi, following up on my broader questions about customizing widget behaviour I am exploring if we could use the embed conversational landing pages. The embedding seem to work well, but I have a couple of questions that weren’t completely clear from the documentation: There seem to be no concept of “targeting” from Drift for the conversation landing pages. So we will have to hardcode / configure the URL to the particular playbook ourselves. Is this correct? Comparing to the chat widget, I couldn’t find a way to restore the previous conversation. For example: a user opens a modal, starts a conversation with an embedded landing page, closes the modal, opens again → the conversation start from scratch. Is there a way to continue the conversation?

8 months ago

RyanNew Participant

asked in Widget

Drift widget impact of javascript on website

Hi,Installing the Drift widget on a website impacts the loading time of the website page considerably.The Core Web Vitals stats increase such as cpu time, script evaluation etc. Also the URL below shows that Drift adds unused CSS to the mix.There are ways to reduce the size of the javascript / unused css but not the execution nor blocking time of the script itself. What is the best way to go about?Example:https://pagespeed.web.dev/analysis/https-www-drift-com-learn-chatbot/kvaebwl2yx?form_factor=mobile

8 months ago

Anton TestNew Participant

asked in Widget

Customizing Drift widget behavior

Hi 👋I am exploring if it is possible to customize the widget’s behavior. For example, instead of the default chat bubble in the bottom of the page, I’d like to have a custom “chat” button as part of our application’s header. When user clicks the chat button, the Drift chat appears in the top of the screen. My current approach is simply hiding the Drift’s button with CSS and positioning the chat to the top of the screen. Opening the chat programmatically when use clicks the button in our application header. This isn’t flexible and I am hitting a bunch of issues with this approach especially with positioning the widget at the top as I don’t know the exact size of the widget. The information I get from the resize event includes the whitespace inside the iframe. The whitespace is different in various widget states like welcome message state or a chat state. This makes it hard to reliably position the iframe relative to the header. It also makes a large area around the visible elements non

9 months ago

Erika StiglemanDrifter

posted in Widget

How to test your Drift Events in GA4

Do you love analytics? Have you migrated your GA setup to GA4?It’s time! July 1st is the deadline for all migrations to the new GA4 platform.Let’s discuss what is needed to continue tracking Drift Events in your GA4 platform?Drift likes to keep it simple, updating your Tracker ID to your new Tag ID in your Drift GA integration will keep you on track. You can find a deeper insight with Drift’s GA help document.After making this update, we are ready to test which events are being pushed into your GA platform using the GA Debugger Tool. The Debugger Tool extension can be found here.Google Analytics Debugger - Chrome Web StoreWith the debugger tool turned on, open the inspect tool on your site and navigate to the console. While interacting with the Drift bot your console will show all the Drift events being captured. If you have any questions just add a comment and we're here to help!

11 months ago

Nic BrownCommunity Manager

published in Widget

FAQs About the Drift Widget

Here are some common questions we get regarding the Drift Widget! We will continue to add more as we hear from customers each month.What is the character limit on a hook message so the text doesn’t go to …?You have 100 characters before the preview image trails off. This includes spaces and special characters.Why is my widget still displaying when I excluded it with targeting? Removing your widget from a page or situation does not prevent Playbooks from firing on that page! While the widget can coexist with playbooks, Playbooks don't need the Drift Widget in order to work. Often, people will create Playbooks for their customers to interact with on a page, and they want the whole chat bubble icon to disappear if the bot flow is completed, rather than leave the chat there for people to type into freely.Why isn't my Default Greeting updating? If you've edited your Default Greeting and don't see it updating on your site, there's most likely an easy explanation. If the widget is expanding

274

11 months ago

Nic BrownCommunity Manager

published in Widget

How to Make your Widget Display a GDPR Compliance

For GDPR compliance, end-users may need to give consent to Drift to save their information. Drift will use a visitors IP address to determine their location, and if that matches a country you’ve set to show a consent form to, it will display.Example Privacy Policy form.To create a consent form,Go to Settings > Data Privacy Click Create formAfter clicking create form, you’ll have an opportunity to select the browser language Drift looks at the visitor's browser language to decide which of your consent forms to show. If you don't have a consent form to match, it will display your default consent form. Note: If you include a link to a privacy policy that is longer than 30 - 35 characters, the link may be cut off by the widget.Drift will use cookies to recognize when users opt in or out. You can customize the Opt out message on the create form screen above.If you have multiple consent forms, you can select the Default message by clicking the star button on the consent form you’d like

100

1 year ago

Nic BrownCommunity Manager

published in Widget

How to edit the default greeting and display hours

Your default greeting is the first message a person sees when interacting with your widget, and is reactive based on your Online vs Offline business hours. Having a fun or intriguing default greeting can be used to drive up engagement, or can be used to help train your customers about your online hours.To modify your default greeting, navigate to Settings > App Settings > Drift Widget > Default GreetingTo change your Online vs. Offline Hours business hours, go to Settings > App Settings > Drift Widget > Hours. From here, you can choose wether to have your hours abide by automatic hours, or a manually toggle.To turn your greeting messages on or off, navigate to Settings > App Settings > Drift Widget, and click on the toggle on the right side of the page.

1 year ago

Nic BrownCommunity Manager

published in Widget

Installing Drift on your Website using Javascipt

The most common way to install Drift on your website is through direct injection of your personalized Javascript snippet. Here's a step-by-step guide to get Drift up and running on your site.Locate the Code Snippet. You can find the snippet by going to Settings > App Settings > Drift Widget > Install, or click here! Click Javascript to expand the section and expose your code snippet.Click Copy Code. That will copy the code to your clipboard.Paste the code just before the end of the </head> section of your website's back end.Note: Please make sure that the widget is only installed once on your site, otherwise you may run into issues with your widget behavior.

1 year ago

Nic BrownCommunity Manager

published in Widget

How to Set Up and Manage the Display Settings of Your Widget

The widget is responsible for managing the majority of your customers' and visitors' interactions with you through Drift. Setting up the widget to display when you want, where you want, and to whom you want is critical to your seeingsuccess with Drift!Defining "Widget"Laymen's Speak: Those little boxes you see on websites (i.e, our Drift chat bubble) that perform one simple function (i.e., chat conversations).The Textbook Definition: A widget is a stand-alone application that can be embedded into third party sites by any user on a page where they have rights of authorship (e.g. a webpage, blog, or profile on a social media site)The Drift Chat Widget: The box which shows in the bottom right corner of your webpage after successful installation. It is the main interface through which your end users can interact with any messages you create and send through Drift chat. It contains and fires Default greetings, Welcome Message playbooks, and LeadBot chat playbooks. Displaying the WidgetIf t

150

1 year ago

Badge winners

chris.bindinghas earned the badge First Comment
parabluhas earned the badge First Post
Tânia Limberthas earned the badge First Post
Nataliahas earned the badge Power User
Perla Garciahas earned the badge First Post

Show all badges

Terms & Conditions Cookie settings

Sign up

Already have an account? Login

Login with SSO

Login to the community

Login with SSO

Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.

Enter your e-mail address

Back to overview

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.