With the Vainu View iFrame solution, you can display Vainu company profiles in Salesforce CRM.
Vainu View makes Vainu's company profile data available to everyone working with customers and needs detailed company information daily, i.e., salespeople, account managers, customer service, and customer success teams. The solution brings ease in preparing for customer meetings and creating customer understanding.
You can embed Vainu's company profiles to Salesforce with iFrame by using
Salesforce Visualforce Page (Recommended) or
Salesforce Developer Console and Apex components
OPTION NUMBER 1:
Embed Vainu View by using Visualforce Page (Recommended)
1. Create the Vainu View Visualforce Page
Go to Lightning tool Setup to create Vainu View Action in Visualforce Page.
Search Visualforce Pages in the search bar and open it > Click New > Name Label Vainu_View > Name is auto-filled > You can leave description field empty > Check the box Available for Lightning Experience, Experience Builder > In the Visualforce markup window, delete the pre-filled text and instead insert this:
<apex:page standardController="Account" showHeader="false"> <apex:iframe src="https://app.vainu.io/embedded/{!account.Business_id__c}?showAll" scrolling="true" height="600"/></apex:page>Remember to change Business_id__c to whatever the API name for your Accounts/Companies Business ID field is in your Salesforce. Adjust the height according to your needs > Save, and the Visualforce Page is ready! 👇
2. Make the VisualForce Page visible on the Account page
A. Create the Account Tab
By going to Object manager > Click Account > Click Lightning Record Pages > Go to the Account Record Page >
Next to Lightning Page Detail, click Edit > Click on the UI Activity Tab (where you want the Vainu tab to be placed) > Click Add Tab > Choose Tab Label Custom and name it Vainu View. 👇
B. Link the Visualforce Page to the UI Activity tab
Click the UI Activity tab you created in the UI view and then drag and drop Visualforce from the left sidebar into the Vainu View window >
In the Visualforce Page Name dropdown menu, choose Vainu View, which you created earlier >
Adjust height in pixels according to your needs > Click Save. The Vainu View Visualforce Page should now be visible in the UI and ready to be used! 👇
OPTION NUMBER 2:
Embed Vainu View by using Salesforce Developer Console
Another more advanced way to create a Vainu View iframe element is to create it by using Salesforce Developer Console. This option is for you if you want to create the customizable iFrame element. For standard set up we recommend following instructions for Visualforce Page.
Required user permissions in Salesforce and Salesforce editions for Vainu View
To enable Vainu View to your Salesforce, you will need access to the Salesforce Developer Console to add iFrame components. You can check which Salesforce Editions include access to the Developer Console and what user permissions are required >> on this page.
If adding the iFrame doesn't work in the production environment in Salesforce, please try the Sandbox environment. In some cases, the production won't allow the changes.
Start with these steps:
First, open any company card from Salesforce. Then, from the menu, select Edit and see which field you store company business id in – generally, it's the Account Number field.
Open the Setup menu and select Edit Object. Select Fields & Relationships and see the Field Name for the Field Label (AccountNumber). Save the Field Name for later use.
Go back to the same view you were before, open Developer Console from the Setup menu, and select Edit Page in the same window.
Bring Developer Console to front and add a new Lightning Component from File -> Add -> New Lightning Component.
Give the component a name, tick Lightning Record Page active, and Submit.
Add a new Apex Class component, give it the 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 { @AuraEnabled 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 the right side, open Controller and replace My action text with the quoted text below. Make sure Field Name is the same as in step 2 and save.
({ doInit : function(component, event, helper) { var action = component.get("c.getBusinessID"); action.setParams({ "accid": component.get("v.recordId") }); action.setCallback(this, function(a) { component.set("v.bid", "https://app.vainu.io/embedded/"+a.getReturnValue().AccountNumber+"?showAll") }); $A.enqueueAction(action) }})8. Open Component from the right side and paste the quoted text below in the Console. Make sure the controller name is the same as the name of the 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}" width="1000" height="1000" /> </aura:component>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 a working Vainu View view on the company card. 🌟
If you added these changes in the Sandbox environment, remember to deploy them to production by following these instructions in Salesforce HelpCenter: Deploy changesets from sandbox to production.
Are you interested in using Vainu View with the API key? >> Read this article.
More info about iFrame elements on >> Vainu Developer Hub.
Should you need more information about the Vainu View solution, please chat with us or email at support@vainu.io, and we're happy to help you out!