• Demo
• Installation
  • Tab
  • Feed
  • Create
  • Events
• Webview / Iframe
• Contribution

Our SDK allows you to add the feedback solution www.stomt.com to your websites or any other HTML/JavaScript based applications. The SDK currently allows you to add a button to your website, which when used open a STOMT creation form. In the form customers can choose if they want to speak a wish or praise your site and then enter their thoughts. All submitted ideas can then be manages on the STOMT website, where they can be discussed, voted and finally come true.

To connect your site to STOMT, create a project page on stomt first.

View the live demo here. The projects source can be found on GitHub, it itegrates the sdk dynamically in the index.html file.

To install the STOMT JavaScript-SDK you only have to add the following lines to the bottom of you html file and adjust the "appId" at the bottom of the script to your business profiles username.

<div id="stomt_feed"></div> <!-- if you want to include a feed -->
<div id="stomt_create"></div> <!-- if you want to include a feed -->
<script>
  // Include the STOMT JavaScript SDK
  (function(w, d, n, r, t, s){
    w.Stomt = w.Stomt||[];
    t = d.createElement(n);
    s = d.getElementsByTagName(n)[0];
    t.async=1;
    t.src=r;
    s.parentNode.insertBefore(t,s);
  })(window, document, 'script', 'https://www.stomt.com/widget.js');
  
  // Adjust the 'APP_ID' to your application id 
  // you can find it here: https://www.stomt.com/YOUR_PAGE/apps
  Stomt.push(['addTab', {appId: 'APP_ID'}]);
  Stomt.push(['addFeed', {appId: 'APP_ID'}]);
  Stomt.push(['addCreate', {appId: 'APP_ID'}]);
</script>

Copy & paste, done! You have further options to customize the widget. See the documentation part below.

The current version allows you to add a Feedback button to your page:

Stomt.push(['addTab', options]);

You can use the showTab(options) method to show the widget if it is hidden.

Stomt.push(['showTab', options]);

You can use the hideTab() method to hide the widget.

Stomt.push(['hideTag']);

You can use the toggleTab(options) method to toggle the widget.

Stomt.push(['toggleTab', options]);

You can use the updateTabJSON() method to set a new JSON object for the Tab Widget. The next times a STOMT is created this JSON is attached. See options below for more information about JSON data.

Stomt.push(['updateTabJSON', json]);

You can use the updateTabFile() method to set a new file for the Tab Widget. The next times a STOMT is created this file is attached. See options below for more information about data.

Stomt.push(['updateTabFile', file]);

The options param has to be handed into the addTab function to initialize the widget and can be handed into the showTab function to update the widget state.

Example:

// setting the target to the same target your appId is linked to makes sense, 
// as it disables the possibility to change the target in the STOMT form.

var options = {
  appId: 'YOUR_APP_ID',
  position: 'left', 
  label: 'Speak your wish!', 
  colorText: '#FFFFFF', 
  file: {name: 'fileName.file', data: Object},
  json: {myKey: 'myValue', labels: ['goodLabel', 'testLabel']},
  showClose: false
};

Stomt.push(['addTab', options]);

The feedback button can be styled and positioned using the css class .stomt-button.

For example:

/* round button in the bottom right corner */
.stomt-button {
  height: auto;
  border-radius: 50%;
  right: 50px;
  bottom: 50px;
  color: transparent;

  transform: none;
  float: none;
  padding: 0;
}

/* overwrite the content with a custom icon */
.stomt-button:before {
  font-family: "my-icon-font";
  line-height: 1;
  display: inline-block;
  content: "my-custom-icon";
  color: #ffffff;
  font-size: 40px;
  padding: 5px;
}

To add custom styling to the widget itself please add a <style> tag to the page containing the STOMT widget. This tag will be put inside the iframe to overwrite the default styling.

To allow us to read the tag please add the attribute stomt-widget to the <style> tag: <style stomt-widget>. To be sure that your styles overwrite the default styling please use !important.

An example for custom styles can be found below:

<style stomt-widget>
  /* customize wish/like bubble color */
  /* NOTE: please adjust the font color when changing the background-color */
  .stomt-create-bubble--wish {
    background-color: blue !important;
    border-color: blue !important;
    color: white !important;
  }
  .stomt-create-bubble--like {
    background-color: green !important;
    border-color: green !important;
    color: white !important;
  }

  /* customize target bubble */
  /* NOTE: please adjust the font color when changing the background-color */
  .stomt-create-target-bubble {
    background-color: darkgray !important;
    border-color: darkgray !important;
    color: white !important;
  }

  /* customize widget background color*/
  /* NOTE: when changing the background color you might have to adjust header and footer colors*/
  .stomtApp body {
    background: white !important;
  }

  /* customize header color */
  .feed-headline-small {
    color: black !important;
  }

  .widget-footer {
    background: white !important;
  }

  /* customize footer color */
  .widget-footer a {
    color: black !important;
  }

  /* customize submit button color */
  /* NOTE: please adjust the font color when changing the background-color */
  .stomt-form-submit {
    background-color: green !important;
    color: white !important;
  }
  .stomt-form-submit--disabled {
    background-color: darkgray !important;
  }
</style>

The current version allows you to add a STOMT feed somewhere on your page. It searched for an element with the id stomt_feed and adds the creation form in this element:

Stomt.push(['addFeed', options]);

The options param has to be handed into the addFeed function to initialize the widget.

Example:

var options = {
  appId: 'YOUR_APP_ID',
  elementId: 'custom-element', 
  callDE: 'Sags mir', 
  callEN: 'Tell me', 
  lang: 'de', 
  creation: false,
  q: 'improve',
  has: 'reaction',
  label: 'discuss',
  from: 'userID',
  resize: false,
  initial: 20,
};

Stomt.push(['addFeed', options]);

The stomt feed can be styled and positioned using the css class .stomt-feed-iframe.

For example:

.stomt-feed-iframe {
  /* use max-width instead of width to ensure that the feed is visible on mobile devices */
  max-width: 600px;
  /* use min-height to define how many stomts should be visible without scrolling (850px ~ 3 stomts)*/
  min-height: 850px;
}

To change the content inside the iframe use the same method as described above in addTab - Custom CSS.

The current version allows you to add a stomt creation form somewhere on your page, it searched for an element with the id stomt_create and adds the creation form in this element:

Stomt.push(['addCreate', options]);

You can use the showCreate(options) method to show the widget if it is hidden or if it has been added with the preload flag.

Stomt.push(['showCreate', options]);

You can use the hideCreate() method to hide the widget.

Stomt.push(['hideCreate']);

You can use the updateCreateJSON() method to set a new JSON object for the Create Widget. The next times a stomt is created this JSON is attached. See options below for more information about JSON data.

Stomt.push(['updateCreateJSON'. json]);

You can use the updateCreateFile(file) method to set a new file for the Create Widget. The next times a stomt is created this file is attached. . See options below for more information about data.

Stomt.push(['updateCreateFile', file]);

The options param has to be handed into the addCreate function to initialize the widget and can be handed into the showCreate function to update the widget state.

Example:

// setting the target to the same target your appId is linked to makes sense, 
// as it disables the possibility to change the target in the STOMT form.

var options = {
  appId: 'YOUR_APP_ID',
  elementId: 'custom-element', 
  lang: 'de', 
  file: {name: 'fileName.file', data: Object},
  json: {myKey: 'myValue', labels: ['goodLabel', 'testLabel']},
  preload: true
};

Stomt.push(['addCreate', options]);

To change the content inside the iframe use the same method as described above in addTab - Custom CSS.

You can register Event Listeners to react on user interactions with the widget by calling registerWidgetListener. Registered Callbacks can be removed via the removeWidgetListener method.

function callback (data) {
  ...
}

// to add the callback
Stomt.push(['registerWidgetListener', 'eventType', callback]);

// to remove the callback
Stomt.push(['removeWidgetListener', 'eventType', callback]);

Available events are:

(replace [WIDGET-TYPE] with stomtFeed, stomtTab or stomtCreate)

Instead of using the Javascript snippet you can access the feed page directly in a WebView or Iframe. (For many platforms we did this step for you already and you can grab one of our SDKs.

To embed the form use this url: https://www.stomt.com/widget

To embed the feed use this url: https://www.stomt.com/feedwidget

You can attach all the parameters introduced before (options.appId, ...) to customize the feed for your project:

e.g. https://www.stomt.com/widget?appId=AfRaltKwqi39T8nSXdzPsmCtx&callEN=Tell+us+what+you+miss

We would love to see you contributing with your ideas to the STOMT JavaScript-SDK. Please addess all your wishes to the STOMT SDK (JS) on STOMT.

• Max Klenk
• Mathias Möller

• On the web www.stomt.com
• STOMT for iOS
• STOMT for Android
• STOMT for Unreal Engine
• STOMT for Unity 3D Engine