Step 2: Embed OneInsight into your Visualforce Page
There are different ways to embed OneInsight:
- iFrame
- Button
In both ways, you have to call OneInsight with a unique identifier (email or Marketo ID).
https://app.oneinsight.io/discover?email=EMAIL_ADDRESS
EMAIL_ADDRESS needs to be replaced with the email address of the contact or lead in Salesforce.
To enable your Visualforce Page to access the data of the object (lead or contact) you want to integrate OneInsight in you have to associate the Standard Controller with your Visualforce page by using the standardController attribute on the <apex:page> tag.
- Contact:
<apex:page standardController="Contact">
- Lead:
<apex:page standardController="Lead">
Now we are ready to create the correct call to OneInsight and can finalize the code for our Visualforce Page.
iFrame
An iFrame will integrate OneInsight directly within Salesforce and will provide you and your users with a native experience and works best if you allow enough screen real-estate.
To embed OneInsight via an iFrame use the following code:
- Contact
<apex:page standardController="Contact"> <apex:iframe src="https://app.oneinsight.io/discover?email={!contact.email}" scrolling="true" id="OneInsight"/> </apex:page> - Lead
<apex:page standardController="Lead"> <apex:iframe src="https://app.oneinsight.io/discover?email={!lead.email}" scrolling="true" id="OneInsight"/> </apex:page>
You have to create a Visualforce Page per Salesforce object to get access to the correct email information via the Standard Controller
Button
If you want to integrate OneInsight more subtly or don't have enough screen real-estate available you can choose buttons in the sidebar.
Clicking on the buttons will open the respective section of OneInsight in a new tab.
https://www.loom.com/share/9c95068782a442329fb5aced23698240 Video
To embed OneInsight via buttons in a sidebar there is a bit more code necessary to make everything look sharp and visually pleasing. Here is some example code to get you started:
- Contact
<apex:page standardController="contact">
<style>
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -10px;
}
.column {
display: block;
padding: 0 10px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
color: #6b7c93;
text-align: center;
text-decoration: none;
}
.column:hover,
.column:focus {
color: #21b0ff;
text-decoration: none;
}
svg {
display: block;
margin: 20px auto;
width: 70px;
height: 70px;
}
</style>
<div class="row">
<a
class="column"
href="https://app.oneinsight.io/discover?email={!contact.email}" target="_blank"
>
<svg
viewBox="0 0 60.333 58.845"
id="customer-search"
width="90px"
height="90px"
>
<circle
cx="24.684"
cy="24.029"
r="5.053"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M17.6,42.09s.711-9.238,8.922-9.238,9.08,7.9,9.317,9.238"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="24.812"
cy="23.47"
r="18.916"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></circle>
<path
d="M41.582,38.166,55,51.564c1.359,1.359,1.674,3.266.7,4.239h0c-.973.973-2.88.657-4.239-.7L38.182,41.713"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></path>
<path
d="M27.9,9.623s9.921.711,12.937,10.1"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-miterlimit="10"
></path>
</svg>
Show activities for {!contact.firstName} {!contact.lastName}
</a>
<a class="column" href="https://app.oneinsight.io/people/best-bets" target="_blank">
<svg
viewBox="0 0 60.333 58.845"
id="customer-centric"
width="90px"
height="90px"
>
<circle
cx="19.695"
cy="24.113"
r="2.486"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M17.139,34.741s.35-4.545,4.39-4.545S26,34.081,26.112,34.741"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="40.148"
cy="24.113"
r="2.486"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M37.592,34.741s.35-4.545,4.39-4.545,4.467,3.885,4.584,4.545"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="30.167"
cy="29.422"
r="26.287"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></circle>
<circle
cx="29.725"
cy="27.894"
r="3.272"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M25.781,41.008s.46-5.982,5.777-5.982,5.88,5.113,6.033,5.982"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="30.167"
cy="29.422"
r="22.569"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
</svg>
Discover other Best Bets
</a>
<a class="column" href="https://app.oneinsight.io/programs" target="_blank">
<svg viewBox="0 0 60 60" width="90px" height="90px">
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="14.3"
cy="30.2"
r="8.1"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="11.8"
r="5.8"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="41.8"
cy="30.2"
r="5.8"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="14.3"
cy="30.2"
r="4.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="11.8"
r="2.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="41.8"
cy="30.2"
r="2.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="48.6"
r="2.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="48.6"
r="5.8"
/>
<line
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
x1="19.9"
y1="24.4"
x2="43.1"
y2="14.2"
/>
<line
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
x1="19.9"
y1="36"
x2="42.6"
y2="46.3"
/>
<line
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
x1="36"
y1="30.2"
x2="22.4"
y2="30.2"
/>
</svg>
Check the Marketo Program Overview
</a>
</div>
</apex:page>
- Contact
<apex:page standardController="Lead">
<style>
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -10px;
}
.column {
display: block;
padding: 0 10px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
color: #6b7c93;
text-align: center;
text-decoration: none;
}
.column:hover,
.column:focus {
color: #21b0ff;
text-decoration: none;
}
svg {
display: block;
margin: 20px auto;
width: 70px;
height: 70px;
}
</style>
<div class="row">
<a
class="column"
href="https://app.oneinsight.io/discover?email={!lead.email}" target="_blank"
>
<svg
viewBox="0 0 60.333 58.845"
id="customer-search"
width="90px"
height="90px"
>
<circle
cx="24.684"
cy="24.029"
r="5.053"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M17.6,42.09s.711-9.238,8.922-9.238,9.08,7.9,9.317,9.238"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="24.812"
cy="23.47"
r="18.916"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></circle>
<path
d="M41.582,38.166,55,51.564c1.359,1.359,1.674,3.266.7,4.239h0c-.973.973-2.88.657-4.239-.7L38.182,41.713"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></path>
<path
d="M27.9,9.623s9.921.711,12.937,10.1"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-miterlimit="10"
></path>
</svg>
Show activities for {!lead.firstName} {!lead.lastName}
</a>
<a class="column" href="https://app.oneinsight.io/people/best-bets" target="_blank">
<svg
viewBox="0 0 60.333 58.845"
id="customer-centric"
width="90px"
height="90px"
>
<circle
cx="19.695"
cy="24.113"
r="2.486"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M17.139,34.741s.35-4.545,4.39-4.545S26,34.081,26.112,34.741"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="40.148"
cy="24.113"
r="2.486"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M37.592,34.741s.35-4.545,4.39-4.545,4.467,3.885,4.584,4.545"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="30.167"
cy="29.422"
r="26.287"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></circle>
<circle
cx="29.725"
cy="27.894"
r="3.272"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
<path
d="M25.781,41.008s.46-5.982,5.777-5.982,5.88,5.113,6.033,5.982"
transform="translate(-1.833 -2.078)"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle
cx="30.167"
cy="29.422"
r="22.569"
fill="none"
stroke="#21b0ff"
stroke-linecap="round"
stroke-linejoin="round"
></circle>
</svg>
Discover other Best Bets
</a>
<a class="column" href="https://app.oneinsight.io/programs" target="_blank">
<svg viewBox="0 0 60 60" width="90px" height="90px">
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="14.3"
cy="30.2"
r="8.1"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="11.8"
r="5.8"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="41.8"
cy="30.2"
r="5.8"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="14.3"
cy="30.2"
r="4.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="11.8"
r="2.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="41.8"
cy="30.2"
r="2.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="48.6"
r="2.5"
/>
<circle
fill="none"
stroke="#21B0FF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
cx="48.4"
cy="48.6"
r="5.8"
/>
<line
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
x1="19.9"
y1="24.4"
x2="43.1"
y2="14.2"
/>
<line
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
x1="19.9"
y1="36"
x2="42.6"
y2="46.3"
/>
<line
fill="none"
stroke="#21B0FF"
stroke-linecap="round"
stroke-linejoin="round"
x1="36"
y1="30.2"
x2="22.4"
y2="30.2"
/>
</svg>
Check the Marketo Program Overview
</a>
</div>
</apex:page>
Great work! Now you can save your Visualforce Page, and we can embed it via the Lightning App Builder.