Embedding AdvocateAnywhere On A Salesforce Object

1. Create your AdvocateAnywhere challenge.

2. Open your Salesforce instance and create a Visualforce Page. We can do this by going to Setup > Build > Develop > Visualforce Page.

3. Create a new page by clicking the 'new' button

4. Give your Visualforce page a name, label, and description that fits in best with your naming schemes.

5. In the Visualforce Markup section, paste the following code:

<apex:page standardController="Contact" tabStyle="Contact" applyBodyTag="false" applyHtmlTag="false" showHeader="false" standardStylesheets="false">
    <style>
      table#bodyTable td#sidebarCell {
        width:327px;
      }
    
      table#bodyTable td#sidebarCell div.sidebar {
        width:auto;
      }
    </style>
    <script src="https://jago.influitive.com/embed.js" data-infl-hub="jago"></script>
    <div class='infl-embed' style='width:327px;'></div>
</apex:page>

Note: Replace https://jago.influitive.com with your hub instance and replace "jago" with your hub subdomain in data-infl-hub="jago". 

Note: To have the AdvocateAnywhere widget slide out of the side of the page like below, remove class='infl-embed'

6. Save your Visualforce page.

7. Now we need to add our new Visualforce page to an object. In this example, we will at it to the Contact object. Go to Setup > Build > Contacts > Page Layouts.

8. Click edit on the layout you wish to add AdvocateAnywhere to.

9. In the console, choose Visualforce Pages from the menu on the left

10. Drag the Visualforce Page from the console down to your desired location on the page layout

11. Once you have placed your Visualforce page on the layout, click the properties icon in the top right and edit the height, make it 600 pixels

12. Save your page layout and open a contact to check it out! You should see the AdvocateAnywhere challenge on the object you added it to.