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.

Still need help? Contact Us Contact Us