Topiqs API

A Topiqs link collection can be displayed in 4 different Views. If you have edit access to a Topiqs, you can display one or more Views of that link collection on your own website :

ListView
PageSlide
TableView
ImageView

Imagine you have a blog and in a blog post you want to compare different say vacuum cleaners. To maximize exposure, functionality and Page Rank you first make a Topiqs called "10 best vacuum cleanes" and then through the Topiqs Javascript API display selected Views of these vacuum cleaners on your own blog enjoying all the functionality built in to a Topiqs View as well as backlink back & forth.

To display your own Topiqs on your own webpage(s) there are 3 easy steps to go through:

On topiqs.online specify on what domain(s) your Topiqs(s) are allowed to be displayed.
On your own webpage add a script reference to the topiqs.online Views script.
On your own webpage add a configuration script exactly there you want your Topiqs to be displayed.

Step-by-step how to show one of your own Topiqs on your own website :

Specify on what domain(s) your Topiqs(s) are allowed to be displayed :
1. On https://topiqs.online login (if not already logged in) and navigate to one of your own Topiqs.
2. Click Edit on your own Topiqs.
3. In the Topiqs Editor expand the "Advanced Properties"
4. In the "Advanced Properties" :
  - Public MUST be true (Private Topiqs can NOT be displayed on 3. party websites)
  - Click the "Add Domain" button to add any number of domains that this Topiqs can be displayed on.
    API Access Examples:
    - mydomain.com : this Topiqs can be displayed on mydomain.com.
    - *.mydomain.com : this Topiqs can be displayed on mydoain.com and any subdomain.
    - * : this Topiqs can be displayed on any domain.
    - 123.123.123.123 : (IP address) this Topiqs can be displayed on a website hosted on this IP address - especially useful then developing.
Add a script reference to topiqs.online Views script:
1. In the same Topiqs Editor with "Advanced Properties" expanded click on the "Copy API Scripts" button
2. In the resulting "Copy API Scripts" dialog click on the "Copy Views Script" button and paste the following script reference into the <head> section of your own website :
```
<script src="http://dev.topiqs.online/scripts/views.js"></script>
```

Add a Configuration script:

On your website, exactly there you want to display your Topiqs, add the configuration script. Here are 2 different configuration scripts - you need to add one (and only one) of them :

Minimum configuration script: (the absolutely minimum that you must add)
```
<script>Topiqs.Views.write({ topiqId: TopiqId });</script>
```

Default configuration script: (

you can copy this script from the "Copy API Scripts" dialog)

<script>
    Topiqs.Views.write({
        topiqId: TopiqId,
        Spinner: {
            show: true,
            size: 24
        },
        BackLink: {
            show: true,
            text: "",
            title: "See this on Topiqs"
        },
        Comments: {
            show: true,
            showProfileInfo: true,
            activeProfileInfo: true,
            startOpen: false,
            active: false
        },
        Views: {
            initialView: 'ListView',
            ListView: {
                show: true,
                overflow: "hidden"
            },
            PageSlide: {
                show: true
            },
            TableView: {
                show: true
            },
            ImageView: {
                show: true
            }
        },
        Events: {
            viewsWritten: null,
            commentsWritten: null
        }
    });
</script>

Be sure that
```
TopiqId
```
have the correct value. If you copy the Configuration script from the "Copy API Scripts" dialog, the correct
```
TopiqId
```
value will already have been inserted into the script.

If you have NOT copied the Configuration script from the "Copy API Scripts" dialog, you can find the correct
```
TopiqId
```
from your browsers url field.

Bonus - On your development machine:
To be able to display the Topiqs View on your development machine, you need to grant your development machine access under "Topiqs Editor | Advanced Properties | API Access, either
- Grant API access to all domains (using the '*' universal grant) OR
- Grant API access to the public IP address of your development machine.

Congratulation - You are now setup to enjoy increased exposure, functionality & Page Rank on your own webpages through interaction with your content on Topiqs.

Configuration Script Documentation

Topiqs.Views.write({

Property	Mandatory	Default value	Description
topiqId	Yes	null	Id of the Topiqs that you want to display - this is the ONLY mandatory property.
Spinner {	No
show	No	true (boolean)	Whether to show an animated spinner while Topiqs data are loading.
size	No	24 (integer)	The size (in pixels) of the spinner image.
}
BackLink {	No
show	No	true (boolean)	Whether to show a backlink back to your Topiqs on topiqs.online.
text	No	"" (string)	Here you can write an achor text to the backlink. If the anchor text starts with http, the anchor text will be assumed to be an image source. If left empty (default), the Topiqs logo will be displayed.
title	No	'See this on Topiqs' (string)	The link title. If set to empty string, there will be no title on the link.
}
Comments {
show	No	true (boolean)	Whether to include comments related to this Topiqs.
showProfileInfo	No	true (boolean)	Whether mouseover on profile pictures in the comments should get and display their Topiqs stats.
activeProfileInfo	No	true (boolean)	Whether profile pictures can be clicked on (this will link back to that profile on topiqs.online).
startOpen	No	false (boolean)	Whether included comments should display immediately or must be toggled by the user before the comments show.
active	No	false (boolean)	NOT YET IMPLEMENTED. Whether it is possible for Users on the external website to comment.
}
Views {	No
initialView	No	'ListView' (string)	If displaying more than one View, the User can tab through the displayed Views. This property specifies which View is default open. You should probably never set PageSlide to be default open.
ListView {	No
show	No	true (boolean)	Whether to display ListView or not.
overflow	No	"hidden" (string)	"hidden" \| "show". Whether to truncate the name of a url if there is not enough horizontal space ("hidden") or to let the name of the url span several lines ("show").
}
PageSlide {	No
show	No	true (boolean)	Whether to display PageSlide or not.
}
TableView {	No		NOT YET IMPLEMENTED.
show	No	true (boolean)	Whether to display TableView or not.
}
ImageView {	No
show	No	true (boolean)	Whether to display ImageView or not.
}
}
Events {	No
viewsWritten	No	null (function)	This event will be raised then the Views are finished writing.
commentsWritten	No	null (function)	NOT YET IMPLEMENTED. This event will be raised then the Comments are finished writing the first time.
}
Resources {	No		NOT IN DEFAULT SCRIPT. Topiqs will push some 3.party resources (eg. Bootstrap) to the browser in order to help display the Topiqs Views. The Topiqs Views script will try to test if these resources are already loaded and if they are not then insert them into the browser. However, the Resources configuration allows you to manually overwrite the default behaviour.
FontAwesome	No	'auto' (string)	'auto' : let the Topiqs Views script find out whether to insert a reference to FontAwesome. 'yes' : Topiqs MUST insert a reference to FontAwesome. 'no' : Topiqs must NOT insert a reference to FontAwesome.
jQueryScript	No	'auto' (string)	'auto' \| 'yes' \| 'no'
PopperScript	No	'auto' (string)	'auto' \| 'yes' \| 'no'
BootstrapScript	No	'auto' (string)	'auto' \| 'yes' \| 'no'
BootstrapCss	No	'auto' (string)	'auto' \| 'yes' \| 'no'
}
cacheControl	No	1 (integer)	NOT IN DEFAULT SCRIPT. Incrementing the cacheControl value will force browsers to reload Topiqs resources (scripts, css & images) instead of loading resources from the browser cache. If you want to be certain that users will always get the newest version of Topiqs scripts, css & images, you can set cacheControl to current date like cacheControl: "" + (new Date()).getFullYear() + ((new Date()).getMonth() + 1) + (new Date()).getDate(),
parentElementId	No	null	NOT IN DEFAULT SCRIPT. This property makes it possible to position the Configuration script anywhere, eg. in the <head> section and then use this property to point to the element there you want to display the Topiqs Views.
scriptId	No	null	NOT IN DEFAULT SCRIPT and probably rarely useful, however if you don't use the parentElementId property and target browsers are not able to locate the Configuration script location, you can use this property to identify the Configuration script tag (must add a matching id-attribute to the Configuration script tag as well).

}