Create a Content Source App

This guide describes how to create a content source app.

Step 1: File Setup

Your App will require the following new files hosted within your domain's root directory:

content.html - The external page that will load within a the custom modal window

Step 2: Create a Content Source extension

To create a Content Source for your app in My Apps:

Click on your app's name
Click New Extension
Select Content Source
Insert 'My Content Source' as a title for your Content Source in the 'Title' field
Optionally, provide an icon to serve as the image of the content source:
- Store this image in the domain's root directory.
- Point to the absolute URL of the image in the 'Icon URL (30x30)' field
To specify the URL used to load your app, type it in the URL field (ex. https://localhost/app.html)
Click Save
You have now created a content extension for your app.

Step 3: App Installation

Inside your Hootsuite dashboard:

On the Launch Bar, go to Tools > App Directory
Click My Apps - your app should appear in the menu
Click Install (next to your app name)
Inside the 'Content Source' tab, look for the plugin you created and click Finish

Your content source app has now been successfully installed!

Step 4: JS Library Setup

In order to communicate with the Hootsuite dashboard, you will need to add a reference to the Hootsuite SDK: https://assets.hootsuite.com/jsapi/4-1/hsp.js

To reference this script, add the following HTML snippet to the top of the section of your content.html file:

<script src="https://assets.hootsuite.com/jsapi/4-1/hsp.js"></script>

Step 5: App-to-dashboard communication

In content.html, initialize the JS API using the hsp.init function and set the hsp parameters. Insert this code in between HTML script tags, in the <body> section of the file:

<script>
hsp.init({});
</script>

Now you can start using the SDK functions, such as hsp.attachFileToMessage()

Step 6: Content Setup

In content.html we will display an image and add a function to attach that image in the Hootsuite Compose Message Box.

<html>
  <head>
  </head>
  <body>
    <script>
      function attachImage(url) {
       hsp.attachFileToMessage({
url: url,
	name: 'abc',
	extension: 'png',
	timestamp: 3149159265,
	token: SHA512(user_id + timestamp + url + secret)
});
      }

      </script>
<img src=’img/flyingduckfrommars.png’ onclick=’attachImage(‘img/flyingduckfrommars.png’);’>
  </body>
</html>

Step 7: Configure Views

Your fully equipped content app can now be accessed in the Publisher View and Compose View. If they do not show up in there, make sure that you have both selected in your Apps Content Extension within My Apps.

Your app should be a one-page app that includes two different views (Publisher / Compose) To create different views, add one of the following parameter to the url:

?view=default
?view=compose