Bubble.io Tutorial - Get user's browser information in Bubble

In this video you will learn different ways to get browser information in Bubble.

Left:

🔗 Browser Platform Detection by Mintflow https://bubble.io/plugin/browser-platform-detection-1593944068480x773811449950634000

🔗 User Agent: http://wieistmeinuseragent.de/

🔗 Browser Language and Locale Plugin by Digital Eye https://bubble.io/plugin/browser-language-and-locale-1611674652831x297972691674333200

🔗 https://de.wikipedia.org/wiki/Locale

🔗 Toolbox Plugin by Misha V https://bubble.io/plugin/toolbox-1488796042609x768734193128308700

🔗 User Stack API https://userstack.com

Code Snippets:

🤖 User Agent Javascript Snippet:

var ua_result = navigator.userAgent;
bubble_fn_ua(ua_result);
console.log (ua_result);

🤖 Browser Language:

var language_result = navigator.language;
bubble_fn_language(language_result);
console.log (language_result);

Video transcript:

Hello, my name is Chris Strobl, I am the founder of No Code Germany and today we are talking about how we get browser information in the Bubble. We have three ways to do this. The first way is with the Browser Platform Detection Plugin. This is a free plugin from Mind Flow and we're going to get started right away and look at how we can use this.

We go once in the Plugins, install this plugin. Then we go to the Design tab and add this plugin under Visual Elements Platform Detection. You can put this anywhere on the screen. Once you have added this plugin, we now have access to the browser data. I have already prepared a text field and here we insert the data dynamically. This means Platform Detection as ua ua means User Agent. If you go to the web page. How is my User Agent D, you will see what a User Agent is in detail? A user agent is a part of the http header that is transmitted. This gives out various information about the client, i.e. the user's computer. How it reaches this website, for example, in my case the whole thing is via a Mac and via a Chrome browser.

Now if we go back to the design tab, we can add the other data as well and the name we do Platform Detection a Name under Version. Let's take Version, Layout, Layout. The Operating System Operating System Platform Detection os description. Product.

And finally, Manufacture, Platform, Directions Manufacture. Let's go to the preview and have a look at what we get here. You see, we get the user agent. This is exactly the same as here. Then we get the browser, Chrome. We get the version, the layout. The operating system with OS X. Again, the description of the browser, but we don't get the product and we don't get the manufacture.

That is, which laptop or which end device is being used here. As you can see, we get quite a lot of data with the Browser Platform Detection Plugin. And now we move on to the second plugin that I would like to show you, namely the Browser Language and local plugin. For this we go into the editor again. We go into the Browser Language and Local plugin, we install it and this is a free plugin Conditional n and we now go into the design to use it.

Under Visual Elements, this browser language inserts you. Again, this is not visible on the web page, this element, but once it is inserted on the page, we have access to the data. We go back to the text box and now insert a Browser Language as. Language and local browser language local. You might be wondering what a local is and this is sort of the STANDARD parameter next to the browser language and this one could be Design for Germany for example. And this then has different effects on two formats keyboard, layout, character set, but also date formats.

We will now go into the test and take a look at the result... You can see that in my case the browser language is set to English and also the local operating system is set to English. In the next step, I will show you how we can also get the user agent and the browser language without a plugin, which is specially made, but with the JavaScript Toolbox.

For this, we again enter in the editor under Plugins installed, the free and very popular plugin Toolbox and then goes into the workflow and we go if Page is loaded. Run mode. JavaScript Here we add the following three lines And what's most important here is that we have this bubble variable among other things to get the user agent. I have also included this code snippet in the video description so that we can insert it. We're going to go into the designed Visual Elements JavaScript Two Bubble. We add this. Now it's important that we add the suffix, that is, as we just did in the workflow. And as value type we make text and publish value we activate. We now go to Preview and look at the whole thing in The Consul. Because we have Console Log you are set up here.

That means preview once. Then we right-click and go to the console and you will now see that we have displayed our user agent here once and thus we have already successfully obtained the user agent. Next we want to display it in the text field. To do this, we go back into the design, go into this text field and select User Agent. JavaScript to Bubble value. User Agent. We click on Preview again.

And now we see that we get exactly the same user agent here. Now we want to get the browser language via Toolbox. To do this, we go back to Editor Workflow. When Page is loaded. Plugins Run JavaScript again. We now copy these three lines and this time the suffix is language and we have again so lock to test it once. Then we go into the designed make the Visual Element JavaScript to Bubble again, this time the suffix language. Public Value. Text.

And go to Preview once now.

Investigate. Into the console and we see here now. The language of the browser in GB. Then we want to access it in exactly the same way in the browser language. This time JavaScript to Bubble by value and go to Preview again. And you can see, analogous to the Browser Language Plugin, that we can do the same with Toolbox. Now, if you need more complex information about your users, there are also services like User Stack Users. ICQ is an API that allows you to get real-time information about browser devices or operating systems. And we can integrate this wonderfully in the Bubble with an API. The best thing to do is to log in to Users ICQ and connect it to the API Connector.

I myself have already registered and therefore go directly to the documentation. For User Steeg you need your Access Keys, which you can find in your Settings. We now go once in the bubble to the API Connector and there I have already configured Users Stack. That means you take the API from the User Stack ActionScript as in the documentation.

And insert your API keys here As authentication you take private keys in URL and then. Make a call, namely a Get Call to API, there users dot com slash. Then add your User Agent, you copy this from the browser that you got here above. And do the format without Here leave everything open for you. Then we go to rhine keys call. And now you can see that we get all kinds of information directly from User Steeg, for example, that I use an Apple, a Mac, that we use which exact operating system and other information. We save this and can now use it directly in Bubble.

For this, we again enter in the text field and now add. Get data Froman, external API, User Steeg And we make this parameter dynamically with JavaScript to Bubble a value that our User Agent and then for User Agent, among others, then Get data from external API. We do the whole thing analogously. And take the name here. Take the browser. Here now Get data from the external API USA rises directly. And now need the browser version here. Then the browser engine Get data from external API. Browser Engine. Get data from external API User Steeg We do this dynamically again.

And ask whether the whole thing is a mobile device. The white is mobile. Then the Operating System. Operating System Name. And here we do Typekit and finally the Brant Get data from an external API. Again, we do this dynamically and the Brant. We're going to go to Preview and take a look at this... And you see how we now have that we get the user agent the same as above. And in the other ways. But we also have the information that we are using a Mac, the browser name. The browser version similar to the others. But we also see the browser engine. We can test whether we are using a mobile device.

In this case, the whole thing is on the desktop. We get the operating system and we also see that we are using an Apple and so you can see that we have different ways of getting browser information in the bubble. That Browser Language Plugin is fallible in all areas. The Browser Detection Plugin or the Toolbox both have their advantages and disadvantages. And if you need more information, you can see that services like User Stack are also relatively easy to integrate into the Bubble.

When using APIs such as the User SDK, you only have to consider what the pricing looks like. Especially if you have more users, these services are of course no longer free.

If you liked this video, feel free to click the like button, subscribe to our channel if you have any questions, feel free to write us in the comments. I wish you continued success and see you soon.