How Feedbank stores feedback

Oct 11, 2022

For those of you wondering how feedbanks process data and how widgets and websites can communicate with each other, here's a quick summary.

In general, there is a point to be careful when inserting scripts into other websites, such as feedbanks, but it is that they must not adversely affect each other.

That's why you need a technology that can at least not conflict with each other resources.

iframe

The iframe makes it possible to separate the client's document and the document created by the feed bank into independent environments. For example, even if a parent document and a child document have elements with the same class name, the styles of the two are applied individually and do not affect each other.

Here, just by setting the z-index of the child document high to make the UI pop out, the widget can float naturally on the website.

From now on, let's say that the client's document is the parent document, and the Feedbank's iframe is the child document.

<script src="https://cdn.feedbank.app/plugin.js"></script>

The JavaScript file pointed to by src in the feedbank script falls within the scope of the parent document. If you print the window in this js file, the window of the parent document is displayed, not the window of the child document. Using this, DOM is created and attached to the parent document as a child, and information of the parent document is also found.

In order for parents and children to exchange data with each other, the following two concepts are required.

• window.postMessage
• window.addEventlistener('message', function)

postMessage

targetWindow.postMessage(message, targetOrigin, [transfer])

postMessage (opens in a new tab) is a built-in function of the window object and is used for data communication between parent and child documents. When sending from child document to parent document, use window.parent.postMessage, and when sending from parent document to child document, use [child document].contentWindow.postMessage.

There is one important security consideration here. The second argument is targetOrigin, You must specify the url where the data is to be sent. When sending from a parent document to a child document, you must enter the url of the child document, and when sending from a child document to the parent document, you must enter the url of the parent document.

addEventListener

If postMessage is for sending, it also needs for receiving. In postMessage, targetOrigin must be specified correctly to receive data.

window.addEventListener('message', function (event) {
  console.log(event.data)
})

If you register an event named 'message' in the first argument, when the targetOrigin matches the current origin, the data sent as an object named data is included in the event.

User agent

Feedbank saves and sends browser information, operating system information, and device information when sending feedback. This is so that visitors can pinpoint exactly under which environment the issue is occurring.

The value used at this time is window.navigator.userAgent. User agent simply refers to the user's identification information. Even if they visit the same website, each user's browser, operating system, and device are different, so it is a long string that contains this information at once.

The feedbank parses and separates these values ​​and stores them.

In addition to this, the screen width and height values ​​at the time of creation are also saved. This is because there are cases where the ui is broken at a certain width, so those values ​​are a reference.

So far we've covered how feedbanks store feedback. As long as you know the concept of postMessage and eventListener, other than that, there is not much difference from creating a normal website.

<script
  type="text/javascript"
  defer
  async
  src="https://cdn.feedbank.app/plugin.js"
  plugin-key="[PLUGIN KEY]"
></script>