Scraping data from the web form to your application

If you have your own website where there are no forms ready to be filled in by visitors yet, you can very easily create a form as a Pop Up, using our ready-made Templates or using the code editor, which allows you to more easily interact with arrangement or number of appropriate Inputs.

However, when you care about the classic form resulting from the direct implementation in the code of your website, you can use the methods provided by us below:

• Use of methods related to the Widget

If we want our customer data collected on an ongoing basis in the user.com application to be directly related to credentials, from the form filled in by them, the most recommended solution is to add appropriate methods that are used for this.

Let's say that on your website, inside the HTML code, there is an example form that is to collect data about the first name, last name, email address and telephone number of the user who filling out the form, looking like this:

<form>
  <label for="first_name">First name:</label><br>
  <input type="text" value=""><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" value=""><br>
  <label for="email">Email address:</label><br>
  <input type="email" value=""><br>
  <label for="phone_number">Phone number:</label><br>
  <input type="text" value=""><br><br>
  <div>SUBMIT</div>
</form> 

Then we can add a JavaScript script (UE.pageHit method) that will send data to our application. Before we do that, however, we will have to download the data from the above inputs, and to do this, we need to add the appropriate IDs, which for the purposes of this example, let them be the target names of our app attributes:

<form>
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" value=""><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" value=""><br>
  <label for="email">Email address:</label><br>
  <input type="email" id="email" value=""><br>
  <label for="phone_number">Phone number:</label><br>
  <input type="text" id="phone_number" value=""><br><br>
  <div>SUBMIT</div>
</form> 

thanks to this, we are able to refer to the values entered by visitor in inputs:

<script>
UE.pageHit({
      apiKey: "Your_apiKey",
      first_name: document.getElementById("first_name").value,
      last_name: document.getElementById("last_name").value,
      phone_number: document.getElementById("phone_number").value,
      email: document.getElementById("email").value
      })
</script>

however, in order for the above script to work, it is also necessary to mark in the code that the values will be downloaded only after the user presses the button repeating filling in the form, therefore, according to the above scheme, add the appropriate ID to the button also:

<divid="button">SUBMIT</div>

and then select and send the values provided from Visitor, after pressing the button to which we can now also refer using this identifier:

<script>document.getElementById("button").addEventListener('submit', function () {
  UE.pageHit({
        apiKey: "Your_apiKey",
        first_name: document.getElementById("first_name").value,
        last_name: document.getElementById("last_name").value,
        phone_number: document.getElementById("phone_number").value,
        email: document.getElementById("email").value
        })
});
</script>

What's more, when we want to know that a given user has updated their data by filling out the form, we may also want to note it in his profile. For this purpose, we will use the userengage ('event.name') method, which will allow us to create an event on the profile of a given user with a name of our choice (for the purposes of this example let's call it "Submitted Form":

<script>
userengage('event.Submitted Form', {
        first_name: document.getElementById("first_name").value,
        last_name: document.getElementById("last_name").value,
        phone_number: document.getElementById("phone_number").value,
        email: document.getElementById("email").value} )
</script>

If we want this event to be triggered when the button is pressed, we simply add this code to the previously created script:

<script>document.getElementById("button").addEventListener('submit', function () {
  UE.pageHit({
        apiKey: "Your_apiKey",
        first_name: document.getElementById("first_name").value,
        last_name: document.getElementById("last_name").value,
        phone_number: document.getElementById("phone_number").value,
        email: document.getElementById("email").value
        });
  userengage('event.Submitted Form', {
        first_name: document.getElementById("first_name").value,
        last_name: document.getElementById("last_name").value,
        phone_number: document.getElementById("phone_number").value,
        email: document.getElementById("email").value} )
});
</script>

Now, after completing the form, the user with the appropriate data should appear in the database of our application, and the user's data will be updated due to his activity on the site.

To see more of options to Integrate your website with user.com by the frontend, check - JavaScript integration

Good to mention

In user.com we have two different api keys - one 6-character public key related to the widget and the second 65-character key responsible for communication with API. The use of the second key is described later in this article.

Use of API Requests

In the event that a visitor to our website blocks the use of our Widget and we still want to download data from the form filled in by him to our application, we can also help by using our API Requests, which send data via backend.

However, this method is not recommended to be used exclusively, except for the use of the above-mentioned method, because creating a new user in our database in this way makes it impossible to associate him with the user who completed the form, and thus, his profile will not contain information about his activity on side.

In our API Docs you will find many methods of sending data to the application in this way (Create user), but for the purposes of this example we will use the method in the form of a JavaScript script, which, based on our form provided in this article and the entered ID values, will look like this:

var data = "email="+ document.getElementById("email").value +"&first_name="+ document.getElementById("first_name").value +"&last_name="+document.getElementById("last_name").value+"&phone_number="+document.getElementById("phone_number").value;
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      console.log(this.responseText);
    }
  });

  xhr.open("POST", "https://<your_app_subdomain>.user.com/api/public/users/");
  xhr.setRequestHeader("authorization", "Token <your_64_char_api_key>");
  xhr.setRequestHeader("accept","*/*; version=2");
  xhr.setRequestHeader("content-type","application/json");
  xhr.send(data);

In order for the code given above to work, at the end, we have to refer to the pressed button analogically, which will look like this:

<script>document.getElementById("button").addEventListener('submit', function () {
var data = "email="+ document.getElementById("email").value +"&first_name="+ document.getElementById("first_name").value +"&last_name="+document.getElementById("last_name").value+"&phone_number="+document.getElementById("phone_number").value;
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      console.log(this.responseText);
    }
  });

  xhr.open("POST", "https://<your_app_subdomain>.user.com/api/public/users/");
  xhr.setRequestHeader("authorization", "Token <your_64_char_api_key>");
  xhr.setRequestHeader("accept","*/*; version=2");
  xhr.setRequestHeader("content-type","application/json");
  xhr.send(data);
});
</script>

IMPORTANT

For security reasons, remember that your developers make sure that your HTML code is pre-rendered from the server side so that your apiKey Token (65-character key responsible for communication with API) cannot be seen by the visitor.

Moreover, it is possible to avoid duplicate users when sending data via the backend, but it is necessary to check if the user with the given user key (which is also their cookie value of __ca__chat) is in the database already.

To use the endpoint for the user key checking see this one - Find user by user key (cookie)

Putting the above code will register a user who is blocking our Widget. It is an alternative that, while using the previous method, will give us the ability to process any user.