Javascript Embed API

Installing The Embed Tag

We've been working towards making the tag installation easy and fast. However if you encounter problems, don't hesitate to contact us for help. 

To install your embed tag, visit the embed settings page. From there you can copy the tag and paste it into your webpage or application.

You can also email the tag, along with instructions for install, to a coworker or developer who can them install it on your behalf.

If you don't have access to the account, you can install the tag using the following snippet. You'll need to ask for the user's account ID.

<script async type="text/javascript">
  window.ucentric=window.ucentric||{},window.ucentric.init=function(n){window.ucentric.OnInit=arguments},window.ucentric.load=function(n){var i=document.createElement("script");i.type="text/javascript",i.async=!0,i.src="https://edge.519staging.com/"+n+"/v1/ucentric.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(i,t)},window.ucentric.Version="1.0.0",window.ucentric.load("{{ YOUR UCENTRIC ACCOUNT ID HERE }}");

  window.ucentric.init({
    userId: {{ YOUR USER'S ID HERE }},
    userTraits: {
      "KEY": "VALUE"
    }
  });

</script>

Place the above code before the closing </body> tag.

Identifying Users

Adding User ID

window.ucentric.init({
    userId: {{ STRING or INTEGER }}
});

Adding User Traits

window.ucentric.init({
    userTraits: {
      key: {{ STRING or INTEGER }}
    }
});

Using Your Own Custom Button To Open The Widget

You can disable the floating Ucentric button and provide your own.

First, pass the "DisableButton" option into the themeOptions object. This will let Ucentric know not to create the floating button.

window.ucentric.init({
    themeOptions: {
      'Slider': {
        'DisableButton':  true
    }
});

Next, create your button, adding the "data-ucentric-feed" attribute to the button's HTML. You can use an "<a>" or "<img>" tag to open the widget as well.

<button data-ucentric-feed>What's New</button>

Lastly, you can use the "BadgeStyles" theme option to pass styling to the badge. In order for the badge to display the number of unread posts correctly, make sure your button is positioned with "position: relative". The "BadgeStyles" object uses the CSSStyleDeclaration interface.

window.ucentric.init({
    themeOptions: {
      'Slider': {
        'DisableButton':  true,
        'BadgeStyles': {
           'top': "2px",
           'right': '3px',
           'backgroundColor': 'blue'
        }
    }
});

To make styling the badge easier, you can use the "BadgePreview" theme option to force a badge to appear. Just remember to remove this option when you make changes live!

window.ucentric.init({
    themeOptions: {
      'Slider': {
        'DisableButton':  true,
        'BadgePreview': true,
        'BadgeStyles': {
           'top': "2px",
           'right': '3px'
        }
    }
});

Using Custom Buttons In Single Page Applications

Often times in a single page application such as one using React, the button you want to trigger has not yet been created when the Ucentric library is initialized. When this occurs, you can call the window.ucentric.Proxy.setNewCount() method manually so that the Ucentric library discovers your button.

Example inside React component

componentDidMount() {
  if ('ucentric' in window) {
    window.ucentric.Proxy.setNewCount()
  }
}

Example inside an Angular component

ngAfterViewInit() {
    if ('ucentric' in window) {
      window.ucentric.Proxy.setNewCount()
    }
}

Slider / Feed Theme Options

you can use the themeOptions key during initialization to override many different settings.

window.ucentric.init({
    themeOptions: {
      'Slider': {
        'KEY': 'VALUE'
    }
});
Option Key Description
AdvancedCSS (string) a string containing css styles
DisableButton (boolean) when true, the floating notifications button is not shown
BadgeStyles (CSSStyleDeclaration) styles to be applied to the unread count badge
ButtonStyles (CSSStyleDeclaration) styles to be applied to the floating notifications button
Title (string) Text to be displayed in the feed heading
BadgePreview (boolean) when true, a badge will appear on Ucentric feed buttons. Useful for testing.

Still need help? Contact Us Contact Us