{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Web widget extensions - Development Portal | Outreach","description":"Outreach extensibility development and documentation portal","siteUrl":"https://developers.outreach.io","keywords":"outreach developer portal, api documentation, api reference docs, sdk documentation","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"web-widget-extensions","__idx":0},"children":["Web widget extensions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Web widget extensions allow you to display content of a web widget in a several places of the Outreach client"," ","application. You can configure the extension to pass a set of contextual data to the widget allowing it to display useful"," ","information to the end user."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Following extension types are currently available:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#shell-extension"},"children":["Shell extension"]}," - launches your widget as a full-page application embedded into Outreach."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#tab-extension"},"children":["Tab extension"]}," - adds a custom tab with your widget to the Prospect/Opportunity/Account detail page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#tile-extension"},"children":["Tile extension"]}," - adds a new tile containing your widget. The end user may choose to place your tile"," ","on their Prospect/Account overview pages."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You are free to use any available technology to create your extension (for example React). To receive contextual data"," ","your extension should use our lightweight ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk"},"children":["JavaScript SDK"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuring-web-widget-extensions","__idx":1},"children":["Configuring web-widget extensions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Go to editing your app and open \"Feature selection\" tab from the menu on the left."," ","Then add one of the Tile/Tab/Shell extensions."," ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/web-widget-extensions.16de7b697ef142165e8df063bbe97a16de236823614e2910e456683d5aafaf76.9c1bb791.png","alt":"Feature selection screen"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Then on the extension configuration page put in the URL of your web widget and select the Context properties that you'd"," ","like to be passed to the widget. To read the properties you should use the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk"},"children":["JavaScript SDK"]},"."," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/your-first-outreach-extension"},"children":["This article"]}," provides more details."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"shell-extension","__idx":2},"children":["Shell extension"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Shell extension launches from the main Outreach sidebar. Create this extension if you intend to introduce a whole new"," ","section to Outreach client. You can configure to receive ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#user"},"children":["user"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#organization"},"children":["org"]}," data in the extension."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/shell-extension.00a53435f1431b3680c5c47cc915ee6a8e31dbd973f526c6175ff0e6e33f4f63.9c1bb791.png","alt":"Shell extension launches from main Outreach sidebar","title":"#width=500px;"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"tab-extension","__idx":3},"children":["Tab extension"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tab extension launches from a tab on either Prospect/Account/Opportunity detail page. Create this extension if you"," ","intend to provide a widget that deals with individual prospect, account or opportunity. Aside from ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#user"},"children":["user"]}," ","and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#organization"},"children":["org"]}," you can configure to receive the currently opened ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#prospect"},"children":["prospect"]},", ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#account"},"children":["account"]}," ","or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#opportunity"},"children":["opportunity"]}," data."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/prospect-extension.1d768ecfc9a7dcf14552525f1c0a3a5ce1f9638420f9535026249eb1409bdf08.9c1bb791.png","alt":"Prospect extension launches from a tab on Prospect detail page","title":"#width=500px;"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"tile-extension","__idx":4},"children":["Tile extension"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tile extension allows you to create a new widget on the prospect or account overview page. Create this extension if you"," ","intend to provide condensed information about prospect or account. Tile extension can be configured to"," ","receive ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#user"},"children":["user"]},", ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#organization"},"children":["org"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#prospect"},"children":["prospect"]}," or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/javascript-sdk/#account"},"children":["account"]}," data."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/tile-extension-1.fbb60c0122392f11d8494ac93bf114aa584125d63a5179ca29253f482cb30bd2.9c1bb791.png","alt":"Prospect overview with tiles","title":"#width=500px;"},"children":[]}]}]},"headings":[{"value":"Web widget extensions","id":"web-widget-extensions","depth":1},{"value":"Configuring web-widget extensions","id":"configuring-web-widget-extensions","depth":2},{"value":"Shell extension","id":"shell-extension","depth":2},{"value":"Tab extension","id":"tab-extension","depth":2},{"value":"Tile extension","id":"tile-extension","depth":2}],"frontmatter":{"seo":{"title":"Web widget extensions - Development Portal | Outreach"}},"lastModified":"2026-04-29T11:57:31.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/client-extensions/web-widget-extensions","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}