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.

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>​
  • Lead
    <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.

 


Did this help answer your question?

thumbs up
thumbs down

Thanks for the feedback! 🙏🏽