Embed Vainu’s company card to Salesforce CRM with Vainu View iframe solution

Vainu View: 360° company info view on prospects and customers.

Vainu View iframe solution enables customer data to be displayed in Salesforce CRM.

Vainu View solution

  • makes Vainu’s company profile data available to everyone who is working with customers and need detailed company information on a daily basis, i.e., salespeople, people working in customer service as well as account managers and people working in customer success. 
  • brings ease in preparing to customer meetings and creating customer understanding.

Here's tutorial video and written instructions based on the video:


NOTE! If adding the iFrame doesn't work in the production environment of Salesforce please try the Sandbox environment! Some cases the production won't allow the changes.

  1. First open any company card from Salesforce and from the menu select Edit and see which field do you store company business id. (generally Account Number)
  2. Open Setup menu and select Edit Object. Select Fields & Relationships and see what is the Field Name for the Field Label (AccountNumber). Save the Field Name for later use.
  3. Go back to the same view you were before and open Developer Console from Setup menu and from the same window select Edit Page.
  4. Bring Developer Console to front and add a new Lightning Component from File -> Add -> New Lightning Component.
  5. Give the component a name, tick Lightning Record Page active and Submit.
  6. Add new Apex Class component, give it a same name as the name for New Lightning Component. Between brackets input text quoted below and confirm that the text in AccountNumber is the same as the Field Name in step 2. Remember to save.
public class VainuCompanyView {
public static Account getBusinessID(String accid) {
Account bid = [Select AccountNumber FROM Account Where Id =: accid limit 1];
return bid;

7. Open VainuCompanyView.cmp and from right side open Controller and replace My action text with the quoted text below. Change countrycode to match yours and make sure Field Name is the same as in step 2 and save.

doInit : function(component, event, helper) {

var action = component.get("c.getBusinessID");
"accid": component.get("v.recordId")
action.setCallback(this, function(a) {
component.set("v.bid", "https://app.vainu.io/embedded/FI"+a.getReturnValue().AccountNumber+"?showAll")

8. Open Component from right side and paste the quoted text below in the Console. Make sure controller name is the same as the name of Lightning Record Page component in step 5. Edit Height and width to match your need and save.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" controller="VainuCompanyView">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="bid" type="String" />
<iframe src="{!v.bid}"

9. Close the Developer Console and refresh the Lightning component list on the left. You can drag and drop the component to your preferred field.

10. Save it and now you should have working Vainu View view on the company card. 🌟


If you added these changes in Sandbox environment remember to deploy it to production by following these instructions from Salesforce HelpCenter: Deploy change sets from sandbox to production

Should you need more information on our Vainu View solution, chat with us or email at support@vainu.io and we're happy to help you out!