Integrating TwineSocial in a single page app

If you’d like to control when and where your TwineSocial content is created and displayed, you can use an alternate method described below. This is useful in situations where you want your TwineSocial hub to load in response to a button click or other Javascript event, or if you want your hub to load into a specific HTML element. 

Step 1: Embed the TwineSocial script

Embed the TwineSocial hub on your webpage as you normally would by building an embed script that displays your required initial collection.

Step 2: Define the TwineOptions settings object

In the source code for the page hosting your script, define the TwineOptions settings object:

<script type="text/javascript">
    var TwineOptions = {
      autoLoad: false
    };
</script>

When the TwineSocial script detects a TwineOptions settings object on your page, it will no longer automatically load; it'll be up to you to load the TwineSocial hub when you're ready, as described in Step 3 below.

Step 3: Initialize your TwineSocial Hub

To load your hub, call the TwineSDK.init() function. This can be in response to a button click event, or any other javascript event. For example:

<button onclick="TwineSDK.init();">Load Hub</button>

By default, your TwineSocial hub will be loaded into your page immediately following the Twine script. However, you can optionally specify an HTML element to load the TwineSocial hub into with the TwineOptions object. For example:

<script type="text/javascript">
    var TwineOptions = {
      autoLoad: false,
        targetDiv:"socialHubDiv"
    };
</script>

This code will cause your TwineSocial hub to get loaded into an HTML element with the ID of "socialHubDiv" when you call the TwineSDK.init() function.