# Building a simple CRM integration
In this guide we'll show you how you can build a simple CRM to demonstrate how you can integrate with Proff API. In most cases you'd probably not build your own CRM, but the principles here can be applied when integrating with an existing one, or integrating Proff API with any other system as well.
We will be using a call to the ProCompany
endpoint. This endpoint returns company data, just like the Register endpoint
, but also have updated phone numbers from telco data.
Take a look at the video above to see what we will build. We will focus on building the search component (seen when clicking Add new customer) in this guide, but we'll provide you with full source code for building the sample shown in the video.
# Project setup
Proff API does not allow cross-origin requests. This means you can not make requests directly to the API from the browser. We'll create a small proxy server using NodeJS and Express that will make the requests to Proff API from the frontend client. It is assumed that this application will be protected by some authentication mechanism. Anyone gaining access to this application will in theory be able to make requests to Proff API using your credentials.
Create a new Express application using npx express-generator --no-view
.
Save the following content as a new file called search.js
to 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}`,
'api-version': '1.1'
},
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 this "mini"-router to your application. To do that go to app.js
and add the following lines (below
app.use(express.static(path.join(__dirname, 'public')));
):
var searchRouter = require('./routes/search');
app.use('/search', searchRouter);
Run the application with npm start
. Remember to specify your API key as an environment variable!
Test that you can make a request to your proxy server using curl
:
curl localhost:3000/search?name=proff
If you've setup everything correctly you should see (big) a JSON search result object being printed to the console.
# Building the frontend
Now that we have our "backend" in place we'll start building the frontend. In this example we'll be using Vue for this, but you should be able to follow the samples if you are familiar with other frontend frameworks like React, Angular or JQuery.
Let's open up public/index.html
and add the Vue JS library and Bootstrap (for some simple styling). Add the following inside <head>
:
<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>
Let's also add a <div>
tag with an id
attribute that we'll use to mount our Vue app to.
We'll also create a form that can be used for searching for a company:
Add the following code inside <body>
.
<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>
Note that there are a couple of Vue specific things here. The first is @submit.prevent="search"
. This means that when the form is submitted the method named "search" should be invoked (prevent ensures the browser won't refresh the page). The second is v-model
. This binds the name
variable to the form input value.
Next, let's create a new file names main.js
in the public
folder. In this file we add the code to initialize our Vue component with variables and methods:
var app = new Vue({
el: '#app',
data() {
return {
name: '',
searchResults: [],
numberOfHits: null,
}
},
methods: {
search() {
// TBD
},
add() {
// TBD
}
}
});
Include this script from the index.html
file with a <script>
tag at bottom (just before </body>
).
# Implementing the search function
To make the search request to Proff API, we call our proxy backend on /search
.
We check the status code and set the results in the searchResults
array (if a error occured we empty the search results in this case):
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
})
}
We still need to display the search results on the page. We do that by using an unordered list that loops through the searchResults
array.
This can be achieved with the following piece of code (put this inside the <div id="app">
container):
<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 go to http://localhost:3000. You should be able to make searches and see the results coming from Proff API being displayed on your page.
# The rest
Congratulations on coming this far!
What's left now is showing the list of existing companies in the CRM and implementing the add function. We'll not cover that in this guide, but we'll leave you with links to the complete source code for this example which uses localStorage
to save and load the existing companies. In the real world you'd use your database or some API of course.
View the complete source code.