FullStory

FullStory provides an asynchronous JavaScript snippet that loads the recording library and begins capturing all user interactions on your Bubble app automatically. In your Bubble editor, go to Settings (gear icon in the left sidebar) → SEO / metatags → Script / meta tags in header. In the text area, paste the FullStory snippet. You can find the snippet in your FullStory workspace under Settings → General → FullStory Snippet, or in the onboarding wizard. The snippet contains your org ID — a short alphanumeric identifier like 'ABCDE' — in the initialization call. This org ID is deliberately public: anyone who inspects your page source can see it, just as they can see a GA4 Measurement ID. It is not an API key and has no read access to your FullStory data. After pasting the snippet, save Settings. Publish your Bubble app to a live URL (snippet does not run in Bubble editor preview). Visit the live app, click around for a few seconds, then go to your FullStory workspace and check Sessions — you should see a new session recording appear within 30-60 seconds.

1<script>
2  window['_fs_debug'] = false;
3  window['_fs_host'] = 'fullstory.com';
4  window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
5  window['_fs_org'] = 'YOUR_ORG_ID';
6  window['_fs_namespace'] = 'FS';
7  !function(m,n,e,t,l,o,g,y){
8    if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'); } return;}
9    g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};
10    g.q=[];
11    o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
12    y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
13    g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};
14    g.setUserVars=function(v,s){g(l,v,s)};
15    g.event=function(i,v,s){g('event',{n:i,p:v},s)};
16    g.anonymize=function(){g.identify(!!0)};
17    g.shutdown=function(){g("rec",!1)};
18    g.restart=function(){g("rec",!0)};
19    g.log = function(a,b){g("log",[a,b])};
20    g.consent=function(a){g("consent",!a===!1)};
21    g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(l,v)};
22    g.clearUserCookie=function(){};
23    g.setVars=function(n, p){g('setVars',[n,p]);};
24    g._w={};
25    y='XMLHttpRequest';
26    g._w[y]=m[y];
27    y='fetch';
28    g._w[y]=m[y];
29    if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
30    g._v="1.3.0";
31  }(window,document,window['_fs_namespace'],'script','user');
32</script>

Without identify(), all FullStory sessions appear as anonymous visitors — useful for heatmap-style analysis but not for support or success use cases where you need to find a specific user's recordings. After a user logs in, call FS.identify() with their Bubble user ID and key traits. In your Bubble editor, find the workflow that runs after successful login — typically the workflow triggered by the 'Log in' button's click action, after the 'Log the user in' step. Add a new step: Action → General → Run JavaScript (Toolbox plugin required). In the JavaScript field, write the FS.identify() call using Bubble's dynamic data syntax to insert the current user's information. The first argument to FS.identify() is the user ID — use the Bubble user's unique ID or your own user identifier field. The second argument is an object of display traits — name and email are the most useful for support teams. These traits appear in FullStory's user search and in the session detail view. The uid you pass here must exactly match what you use later in the REST API lookup — store it consistently.

1FS.identify('[Current User\'s unique id]', {
2  displayName: '[Current User\'s Full Name]',
3  email: '[Current User\'s email]',
4  plan: '[Current User\'s plan field]',
5  accountId: '[Current User\'s company field]'
6});

The FullStory REST API lets you retrieve a list of sessions for a specific user and get replay URLs programmatically — enabling the support tool use case where staff look up sessions without needing a FullStory account. In your Bubble editor, open Plugins → API Connector plugin. Click Add another API. Name it 'FullStory API'. Set the base URL to 'https://api.fullstory.com'. Under Shared headers for this API, add one header: key is 'Authorization', value is 'Basic YOUR_API_KEY_BASE64'. However, FullStory's REST API uses Bearer token authentication, not Basic auth — add the header as: key 'Authorization', value 'Bearer YOUR_API_KEY'. Mark this header Private by clicking the checkbox next to it. The API key is an account-level credential with read access to all user data and session recordings in your FullStory account — it must never appear in client-side code or a non-Private header. The REST API requires a FullStory Business plan. If the API Keys section does not appear in your FullStory Settings, your current plan does not include REST API access.

1{
2  "api_group": "FullStory API",
3  "base_url": "https://api.fullstory.com",
4  "shared_headers": {
5    "Authorization": "Bearer <private: your_fullstory_api_key>"
6  }
7}

Inside the FullStory API group, click Add another call. Name it 'Get Sessions'. Set Method to GET and URL to '/v1/users/<uid>/sessions' — where '<uid>' is a path parameter that you will supply dynamically. Under Use as, select Data (this call will feed a Repeating Group). In the Parameters section, mark the 'uid' parameter as a path parameter. For the Initialize call step, you need the exact uid value of a real FullStory user — this is the same uid you passed to FS.identify() (your Bubble user's unique ID or identifier). Paste a real uid into the parameter field for initialization. Click Initialize call. FullStory returns a list of session objects, each containing fields including: 'FsUrl' (the direct FullStory replay link), 'CreatedTime' (session start timestamp), 'Duration' (in milliseconds), 'UserAgent', and 'NumEvents'. Bubble maps these fields automatically. After initialization, set the 'Type of content' to List so this call can feed a Repeating Group. In your workflow or page data source, supply the uid dynamically — for example, 'Current User's unique id' or the uid retrieved from a user lookup workflow.

1{
2  "method": "GET",
3  "url": "https://api.fullstory.com/v1/users/<uid>/sessions",
4  "headers": {
5    "Authorization": "Bearer <private: api_key>"
6  },
7  "parameters": {
8    "uid": "<dynamic: bubble user unique id>"
9  }
10}

Now build the Bubble page where support staff look up a user's FullStory sessions. In your Bubble editor, create a new page (or use an existing admin page). Add a text input element labeled 'Search by email'. Add a Repeating Group element below it to show search results (Bubble users matching the email). In the Repeating Group's data source, use a 'Search for Users where email contains Input's value'. Add a 'Get Sessions' button in each row of the first Repeating Group. When clicked, the button workflow calls the FullStory API Get Sessions action with the current row's unique ID as the uid parameter, stores the result in a Custom State (a list of Session objects), and shows a second Repeating Group of sessions. In the sessions Repeating Group, bind each row to the Custom State list. Show the session creation date (CreatedTime), duration in seconds (Duration / 1000), and add a Link element or 'Go to external link' workflow action that opens the FsUrl in a new browser tab. Apply Bubble Privacy Rules to ensure this admin page is only accessible to users with an 'Admin' or 'Support' role. Staff who access this page can view FullStory sessions for any user in your app, so the privacy restriction is important.

FullStory records everything a user types and sees in your Bubble app by default. For most SaaS apps, this is too broad — password fields, payment card inputs, and sensitive personal data should never appear in session recordings. FullStory's solution is element exclusion classes: adding the CSS class 'fs-exclude' to a Bubble element tells FullStory to mask that element in recordings (input values are replaced with asterisks, and the element itself may be hidden in the replay). In your Bubble editor, select the input element you want to mask. In the right-side properties panel, find the 'Appearance' section and look for 'Additional CSS classes'. Type 'fs-exclude' in this field. Repeat for password inputs, SSN fields, credit card inputs, and any other sensitive data fields. Alternatively, 'fs-mask' masks just the input value while still showing the element outline in the replay — useful for seeing that the user interacted with a field without seeing what they typed. Also review FullStory's privacy settings in the dashboard: Settings → Privacy → Data Collection to configure global masking rules by element type.

1/* Add to individual sensitive Bubble elements via 'Additional CSS classes': */
2
3/* Completely exclude from recording (element hidden in replay): */
4fs-exclude
5
6/* Mask the value only (element visible, content asterisked): */
7fs-mask
8
9/* Stop recording entirely on an element and its children: */
10fs-stop