Your first Outreach web widget

Creating an Outreach web widget is a matter of creating a web application containing the Outreach JavaScript SDK. This sample application contains a shell extension and a prospect tab extension. Let's bring this sample app to your Outreach organization. Do not worry, you can't break anything, and you won't disrupt your users.

Step 1: Create your app

Head to the developer portal and create the app. In the "App name" field enter your app name. The app identifier will be pre-populated for you based on that name. It needs to be longer than 6 characters, so edit if necessary and then click "Create app".

Step 2: Set up the shell extension

  1. Click on "Shell extension" section in the left menu and turn on the Shell extension.
  2. In "Hosting URL" specify https://developers.outreach.io/sample-app/sample-app.html.
  3. In "Context properties" select, for example, usr.email and usr.name to forward the email and name of the currently logged-in user to the application.

Save your changes to continue.

Step 3: Set up the Prospect tab extension

  1. Click on the "Prospect tab extension" and turn on the Prospect tab extension.
  2. In "Hosting URL" specify the same URL https://developers.outreach.io/sample-app/sample-app.html.
  3. In "Context properties" select, for example, pro.accnme and pro.accdmn to forward the Account name and Account domain to the application.

Save your changes to continue.

Step 4: Install and test your app

To install the development version of your app select "Install" from the dropdown menu next to your app. The app will be installed for your user account only and won't be visible to anyone else in your Outreach organization.

Once the app is installed, you should see a new icon appear in the bottom of the Outreach's main toolbar on the left. That icon launches the shell extension configured in your app. To access your Prospect tab extension navigate to " Prospects" and select any prospect. Your extension is accessible from the top tab list.

That's it!

You have now successfully created your first Outreach application containing two extension. Now, work from the example app source to create a set of useful extensions. Once that work is done release your app.

By the way, while you are developing your application you'll definitely want to know what features the Outreach Extensibility SDK offers, so check that out too.