We are hiring

Using Typo3? Add the Bug Tracker Usersnap to your CMS!

Usersnap snippet in TYPO3 CMS

TYPO3 is an enterprise-class, open source content management system, used to build and manage websites of all types. One of the great things about TYPO3 is that one can add new types of content elements fairly easily. Say, for instance, a feedback button for your visitors and customers. We are working on a plugin, but in the meantime, here are the needed steps to include Usersnap – the visual bug tracker for web development – into your Typo3 site:

  1. Log into your backend
  2. Left Menu: Click on “Template”
  3. Select your start page (earth icon)
  4. Select “Info/Modify” in the Dropdown menu of the template
  5. Click on the edit button next to setup (pencil icon) – it’s the last entry in the table
  6. A editor opens, insert this code (with your Usersnap snippet) at the end:

page.footerData.9999 = TEXT
page.footerData.9999.value (
<script type="text/javascript">
(function() {
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = '//api.usersnap.com/load/'+
'YOUR-API-KEY-HERE.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
)

Usersnap snippet in TYPO3 CMS

Make sure your Usersnap snippet is inserted between the two parentheses () after page.footerData.9999.value. The snippet (and the tools available under the feedback button) can be customized using the Usersnap configurator.

Next time you’ll open your Typo3 page, you’ll notice the feedback button. Make sure to try it out and send an annotated screenshot to your inbox (or to the project management / customer service tool, you’ve selected in your Usersnap dashboard). Nifty, huh?

Happy developing!

[{"code":""30 days before Christmas
[{"code":""30 days before Christmas
is my 30 days of happiness"."
is my 30 days of happiness"."
"label":"30 days free trial"
"label":"30 days free trial"
"win":true}
"win":true}
{"code":""I'm up in the sky with joy about this Free Upgrade"."
{"code":""I'm up in the sky with joy about this Free Upgrade"."
"label":"Free Upgrade"
"label":"Free Upgrade"
"win":true}
"win":true}
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
"label":"25% Off Coupon"
"label":"25% Off Coupon"
"win":true}
"win":true}
{"code":""I love Usersnap so much I'm going to wear it"."
{"code":""I love Usersnap so much I'm going to wear it"."
"label":"Usersnap Tshirt"
"label":"Usersnap Tshirt"
"win":true}
"win":true}
{"code":""30 days before Christmas
{"code":""30 days before Christmas
is my 30 days of happiness"."
is my 30 days of happiness"."
"label":"30 days free trial"
"label":"30 days free trial"
"win":true}
"win":true}
{"code":""I'm up in the sky with joy about this Free Upgrade"."
{"code":""I'm up in the sky with joy about this Free Upgrade"."
"label":"Free Upgrade"
"label":"Free Upgrade"
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Not your day!"
"label":"Not your day!"
"win":false}
"win":false}
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
"label":"25% Off Coupon"
"label":"25% Off Coupon"
"win":true}
"win":true}
{"code":""30 days before Christmas
{"code":""30 days before Christmas
is my 30 days of happiness"."
is my 30 days of happiness"."
"label":"30 days free trial"
"label":"30 days free trial"
"win":true}
"win":true}
{"code":""I'm up in the sky with joy about this Free Upgrade"."
{"code":""I'm up in the sky with joy about this Free Upgrade"."
"label":"Free Upgrade"
"label":"Free Upgrade"
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Spin again"
"label":"Spin again"
"win":false}
"win":false}
{"code":""
{"code":""
"label":"Trip to Vienna"
"label":"Trip to Vienna"
"win":false}]
"win":false}]