# Building a simple CRM integration

This guide shows you how to build a simple CRM application that integrates with the Proff API.

In most cases, you would integrate the Proff API with an existing CRM or another business system rather than build a CRM from scratch. However, the principles demonstrated in this guide apply to both scenarios.

The application uses the ProCompany endpoint. This endpoint returns company data similar to the Register endpoint, but also includes updated telephone numbers from telecommunications data.

The video above demonstrates what we will build. This guide focuses on the company search used when clicking Add new customer. The complete source code for the application is available at the end of the guide.

# Project setup

The Proff API does not allow cross-origin requests directly from a browser. We will therefore create a small proxy server using Node.js and Express. The proxy receives requests from the frontend and forwards them to the Proff API.

The application should be protected by appropriate authentication and access controls. Anyone with access to the proxy could potentially make requests to the Proff API using your API credentials.

Create a new Express application:

npx express-generator --no-view

Save the following code as search.js in the routes folder:

const express = require('express');
const router = express.Router();
const axios = require('axios');

const API_TOKEN = process.env.API_TOKEN // Your API token
const API_ENDPOINT = 'https://api.proff.no/api/companies/eniropro/NO'

const httpClient = axios.create({
    timeout: 1000,
    baseURL: API_ENDPOINT,
    headers: {
        'Authorization': `Token ${API_TOKEN}`
    },
    responseType: 'json'
});

/* GET home page. */
router.get('/', async function(req, res, next) {
    try {
        const proffApiResponse = await httpClient.get(`?name=${encodeURIComponent(req.query.name)}`);
        res.json(proffApiResponse.data);
    } catch (error) {
        next(error)
    }
});

module.exports = router;

Add the router to your application by adding the following code to app.js, below:

app.use(express.static(path.join(__dirname, 'public')));

var searchRouter = require('./routes/search');
app.use('/search', searchRouter);

Start the application:

npm start

Remember to provide your API key using the required environment variable.

Test the proxy server using curl:

curl "http://localhost:3000/search?name=proff"

If the application is configured correctly, the response will contain a JSON object with the search results.

# Building the frontend

Now that the backend proxy is running, we can build the frontend.

This example uses Vue, but the same principles can be applied with other frontend frameworks such as React or Angular.

Open public/index.html and add Vue and Bootstrap inside the <head> element:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Next, add a <div> element with an id attribute that Vue can use to mount the application. Inside it, create a form for searching for a company:

<div id="app">
  <form @submit.prevent="search">
    <input
      class="form-control"
      type="text"
      v-model="name"
      placeholder="Enter company name"
    >
    <br>
    <input class="btn btn-success" type="submit" value="Search">
  </form>
</div>

This example uses two Vue-specific directives:

@submit.prevent="search" calls the search method when the form is submitted and prevents the browser from reloading the page.
v-model="name" binds the input value to the name property in the Vue application.

Create a file named main.js in the public folder. Add the following code to initialize the Vue application:

const app = new Vue({
  el: '#app',

  data() {
    return {
      name: '',
      searchResults: [],
      numberOfHits: null
    };
  },

  methods: {
    search() {
      // To be implemented
    },

    add() {
      // To be implemented
    }
  }
});

Include main.js in index.html by adding a <script> element just before the closing </body> tag.

# Implementing the search function

To search for companies, the frontend sends a request to the proxy endpoint at /search.

The search function checks the HTTP status and stores the returned companies in the searchResults array. If the request fails, the array is cleared.

search() {
  fetch(`/search?name=${this.name}`)
    .then(r => {
      if (r.ok) {
        return r.json()
      } else { 
        return {searchResults: [], numberOfHits: 0}
      }
    })
    .then(data => {
      this.searchResults = data.companies
      this.numberOfHits = data.numberOfHits
    })
}

The search results can be displayed using an unordered list that iterates over the searchResults array.

Add the following code inside the <div id="app"> element:

<ul class="list-group list-group-flush">
  <li class="list-group-item" v-for="res in searchResults" :key="res.companyId">
    <button class="btn btn-primary" @click="add(res)">Add to CRM</button>
    {{res.name}} ({{res.organisationNumber}})
  </li>
</ul>

Start the application and open http://localhost:3000 (opens new window).

You should now be able to search for companies and view results returned by the Proff API.

# The rest

Congratulations! You have built the main components of a simple CRM integration.

The remaining steps are to display the companies already added to the CRM and implement the add method. These steps are not covered in this guide, but the complete example uses localStorage to store and retrieve company data.

In a production application, you would normally store this information in a database or another backend service.

View the complete source code.

← Using the Changes endpoint Building an application that uses the Changes endpoint →