Saving console.log values in bubble datatbase

Need help
1

Hi all.

I’m using an external service that exists as an HTML embed within my app. When a user completes actions within the iframe, certain unique values are stored in the console.log. I’m trying to figure out a way to save those unique values within bubble.

I’ve played around with the Toolbox plugin, specifically the Javascript to Bubble feature, but I’m having trouble getting the embedded HTML/script to recognize the bubble_fn_x function. “ReferenceError: bubble_fn_1 is not defined” appears.

Appreciate any help and/or direction here!
Charles

2

Try building the javascript function that would grab the variables from the console log and name it something like consoleFunction. Then call the bubble_fn_x(consoleFunction) and it should take care of it for you.

3

Thank you so much for the reply, this makes sense. This is probably a more rudimentary javascript question (not an expert here): could you explain what a function that would grab variables from the console log might look like more precisely? I’ve attached an example of what the console log output looks like. What I need to be able to do is save the “account created” and “User ID” fields into my bubble app.

Screenshot 2020-12-07 122738
Screenshot 2020-12-07 122738823×189 41.4 KB

4

I don’t think that you would be able to copy the variables from the console log using javascript. i think the approach you would need to take is to use javascript to access the iFrame and then copy the variables when they are being posted to the console log. It’s hard to say without seeing the embedded code.

5

Got it - so the fact that the variables are posted to the console log doesn’t really help. Instead, the embedded code should be re-written and/or modified to send the variables to Bubble instead of posting them to the console log?

Here’s the beginning of the iFrame/embedded code that includes the first example of the variables that need to be saved:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="https://plugin.argyle.io/argyle.web.v1.js"></script>
    <script type="text/javascript">
      const argyle = Argyle.create({
        pluginKey: 'your_plugin_key',
        apiHost: 'https://api-sandbox.argyle.io/v1',
        onAccountCreated: ({ accountId, userId }) => {
          console.log('Account created: ', accountId, ' User ID:', userId)
        },

If I understand correctly, the “onAccountCreated” function would need to be modified in such a way that the bubble_fn_x can be called with the accountID and userId variables?

6

Okay, I think that we might be able to make this work. I had to do some quick research, but i think that we can pass the variables using a postMessage/onMessage mechanism. Don’t remove the console.log line from the script in the iFrame, but underneath it, add the following line:

window.parent.postMessage({ message: "getAcctData", value: [accountID, userID] }, "*");

Replace the “*” with URL of the target origin. It ensures security. In your HTML element in bubble with your Javascript code, add the following:

window.addEventListener("message", bubble_fn_1, false);

 var acctData = []
function getAcctData (event)  {
     if (event.orgin == 'target origin url') {
          if (event.data == []) {
                event.source.postMessage('No data passed', event.origin);
          } else {
            acctData = event.Data;
          }
     }
}

bubble_fn_1(acctData);
7

For the JavaScript to Bubble element on the page, make sure that it is returning a list, as that is what you are passing through. Use the List:First Item to get the Account, and List:Last Item to get the User. I couldn’t really test this, but I hope that it works for you.

8

Wow, thanks for all of this detailed help! A few clarifying questions.

  1. URL of the target origin. Is this the domain that the postMessage is coming from? or going to? As in, would I use my own domain here, or the 3p domain that the iFrame is interacting with?
  2. Where does bubble_fn_1 get defined? Seeing some “Uncaught ReferenceError: bubble_fn_1 is not defined” error messages in the console.
  3. the window.addEventListener … is added within the javascript of the iFrame? Or after that / within the HTML embed element?
9

This would be from the domain that you are interaction with, basically the url from the iFrame.

Sorry, I’m still trying to figure out how this whole JS to Bubble works. Try the following:

 window.addEventListener("message", getAcctData, false);

function getAcctData(event) {
     if (event.orgin == 'target origin url') {
          if (event.data == []) {
                event.source.postMessage('No data passed', event.origin);
          } else {
            return event.data;
          }
     }
}
bubble_fn_1(event.data);

the window.addEventListener should be added to an HTML element on the page in bubble. Probably need to add tags for it to work. The event listener triggers the code.

10

OK I figured it out! Your answers led me to search with a few different keywords and find this thread which explains how to use Javascript to Bubble within an iFrame.

Basically, all that needed to be added below the

onAccountCreated: ({ accountId, userId }) => {
          console.log('Account created: ', accountId, ' User ID:', userId)

was

window.parent.bubble_fn_1(accountId)

I think the window.parent is what tells lets the iFrame communicate the variable to the Toolbox plugin element on the page.

The event listener component is not needed in this case, as the plugin handles that step.

Seriously, thank you so much for your help with this today. Would not have figured it out without you!!

2 Likes
11

This topic was automatically closed after 70 days. New replies are no longer allowed.