Our embedded integrations feature offers endless possibilities for embedding your own apps within Copper. In this article, we wanted to show-off an example of what’s possible with embedded integrations.
Follow along to learn how to embed a simple route planner within your web instance of Copper so you can quickly plan a route between two addresses. This recipe is great for outside salespeople who are constantly on the go.
To start, copy the following code and then, using both the Copper SDK Documentation and the Mapquest SDK Documentation to modify the code.
Put in your MapQuest API key
Modify the default “from” address to your company address.
<html> <head> <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/copper-sdk@latest/dist/copper-sdk.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var sdk = window.Copper.init(); sdk.setAppUI({ width: 320, //change the iframe width (currently only app in action bar allow this) height: 495, //change the iframe height disableAddButton: true, //disable the add button in parent frame above the iframe showActionBar: true, //show embedded app iframe for action bar isActionBarActive: true, //highlight the action bar icon }) sdk.getContext() .then(function (data) { var type = data.type; // person,lead,... var context = data.context; // do something with the context document.getElementById("from").value = "301 Howard Street, San Francisco"; //you can replace it with your company address document.getElementById("to").value = context.address.street + ", " + context.address.city + ", " + context.address.state + ", " + context.address.country; //alert("do something"); }); </script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> <script type="text/javascript"> function router(){ if (document.getElementById("run").value == "0"){ L.mapquest.key = 'KEY'; //put your API key here var map = L.mapquest.map('map', { center: [40.7128, -74.0059], layers: L.mapquest.tileLayer('map'), zoom: 12 }); } //console.log(document.getElementById("from").value); //console.log(document.getElementById("to").value); L.mapquest.directions().route({ start: document.getElementById("from").value, end: document.getElementById("to").value }); document.getElementById("run").value = "1"; } </script> </head> <body style="border: 0; margin: 0;"> <form> <div style="font-family: Arial;font-size:12px;">From: <input type="text" name="from" id="from" value="301 Howard Street, San Francisco"/> <br /> </div> <div style="font-family: Arial;font-size:12px;">To: <input type="text" name="to" id="to" value="301 Howard Street, San Francisco"/> <br /> <br /> </div> <input type="button" value="Submit" onClick="router()" name="Submit" title="Submit" /> <input type="hidden" name="run" id="run" value="0"/> </form> <div id="map" style="width: 100%; height: 400px;"></div> </body></html>
Host the code using an app-hosting platform such as Amazon Web Services (AWS), Google Cloud Platform (GCP) or Heroku.
After hosting the code, note the hosted web-app’s URL. You’ll need this URL in just a moment.
In your Copper account, navigate to Settings > Integrations and click the link for “Integrations”. At the bottom of this section, click the button that says “+ Create an embedded app”.
In the pop-up, give your embedded integration a name, then enter the URL that you previously noted. We’ll call it “Route Finder”.
Choose which records you’d like the app to show up on and choose the location(s) of where you’d like the app to appear. For this specific recipe, we recommend adding it the Company records since the route’s your finding will likely be from business to business. For location we recommend adding this to the Activity Panel so it’s visible in a central location.
Save.
Navigate to the Companies record section and select a record with an address.
In the Activity Panel for that record, verify that you see a tab for Route Planner (or whatever you named the app).
You should see the default “from” address, that you modified from the code, pull in your company address. You can click this address to modify the “from” address if necessary.
For the end point address, you should see the address of the company record you’ve selected. You can also click this to modify the address if necessary.
Click “Submit”
Gaze in splendor at the route you just planned without ever leaving Copper.
