Loading Profile...
Placement and size of "Feedback" graphic should be a setting.
I want to roll out the feedback widget across a bunch of sites, but the current placement covers the main content of the sites. Is it possible to move it down a bit, and reduce the size by 25% or so?
I’m excited to roll this out
15
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
The company implemented this idea.
The best point from the company
-
Yes, a more customizable version is coming soon. In the meantime, you can hack the tab image and placement with a bit of CSS. Adjust this css (and the associated image) to fit your needs, and put it inline at the bottom of your page. Be sure to adjust the size to match the size of your new image.
<style>
a#fdbk_tab {
background:transparent url(http://s3.amazonaws.com/getsatisfacti...) no-repeat scroll 0% 0%;
color:#FFFFFF;
cursor:pointer;
height:116px;
left:0pt;
margin-left:-12px;
overflow:hidden;
position:fixed;
text-indent:-100000px;
top:25%;
width:53px;
z-index:100000;
}
</style>
I’m customizable
5 people think
this is one of the best points
-
Inappropriate?Yes, a more customizable version is coming soon. In the meantime, you can hack the tab image and placement with a bit of CSS. Adjust this css (and the associated image) to fit your needs, and put it inline at the bottom of your page. Be sure to adjust the size to match the size of your new image.
<style>
a#fdbk_tab {
background:transparent url(http://s3.amazonaws.com/getsatisfacti...) no-repeat scroll 0% 0%;
color:#FFFFFF;
cursor:pointer;
height:116px;
left:0pt;
margin-left:-12px;
overflow:hidden;
position:fixed;
text-indent:-100000px;
top:25%;
width:53px;
z-index:100000;
}
</style>
I’m customizable
5 people think
this is one of the best points
-
Inappropriate?I think that allowing it to be positioned to the bottom left, or to the right side of a page is highly desireable. Also the activation tab only needs to be a few pixels wide, as it is obvious that something different is there on the page.
Many sites have a menu anchored on the left side of the page, normally also starting at the top of the page and working down.
The current size and placement of the Feedback bar overlaps and hides my sites navigation, and would be very nice to move it elsewhere!
We'll try this CSS hack, maybe it will help for now. Would be awesome if these could be adjusted in some sort of a control panel.
Thanks,
Dave
I’m thankful
-
Inappropriate?We created our own custom Feedback button - horizontal style - and did exactly that, put it on the bottom right.
Here's how we did it:
html a#fdbk_tab {
background-image: url(../../images/bg-tab-feedback.png);
height: 53px;
width: 116px;
left: inherit;
top: inherit !important;
bottom: -16px !important;
right: 32px !important;
}
html a#fdbk_tab:hover,
html a#fdbk_tab:active {
bottom: -8px !important;
}
All you'd need to do would be to change the positioning to wherever you wanted it.
Small thing to remember: it won't work in Internet Explorer.
I’m happy to help, but it would be nice to have the option!
1 person thinks
this is one of the best points
-
Inappropriate?You can now see our custom Feedback button, positioned bottom-right, using the code above (remember, it won't work on Internet Explorer - but you'll still see the custom button on the left) on our site.
Head over to http://car.cast.co.uk.
1 Comment Add a comment
This is one of the best points
-
hey that's awesome! nice work. -
Inappropriate?Rather than moving the default button, I decided to create and place my own.
To hide the deafult button #fdbk_tab {display:none !important;}
Then
a href="#" onclick="GSFN.show()"
Seems to work well on my page
1 person thinks
this is one of the best points
-
Inappropriate?At Feedmyapp we need the button on the right side (suggested from a feedback) to not cover main content on lower resolution and i think it's a common problem.
Here my solution with a bit of css and a new image:
a#fdbk_tab{
background-image:transparent url(/images/site/feedback.png);
left:auto !important;
right:0 !important;
top:30% !important;
margin-left:0 !important;
margin-right:-12px}
a#fdbk_tab:hover{
margin-right:-6px !important
}
Only problems with ie6 so I hide the button on it:
<!--[if lte IE 7]><style type="text/css" media="screen">
* html a#fdbk_tab{display:none;}
</style><![endif]-->
1 person thinks
this is one of the best points
-
Inappropriate?Now it is!
You can customize the placement and color of the feedback tab!
http://getsatisfaction.com/getsatisfa...
1 person thinks
this is one of the best points
1 Comment Add a comment
This is one of the best points
-
Can you update this to add a few more parameters that can be changed? Like the "Top: 25%" is currently fixing the position on the page ... I want it to be 10% or 15% so it doesn't cover content ... add that as an option! :-)
-
Inappropriate?The current "Customize" is still far too limited ... I want to be able to tweak other parameters from the web UI and get the code snippet that reflect my changes. Mostly altering the "Top" parameter, to change it from 25% to 10% or 15% ...
I’m undecided
-
Inappropriate?where can i change the font color and the border color? the updated customization script does not call either of these out1 Comment Add a comment
This is one of the best points
-
You might find more help here: http://getsatisfaction.com/getsatisfa...
-
Inappropriate?I recently created a setup for a custom tab image with the following code (just replace the path to your image where it says "btn_feedback.gif", and add your company name--as GS knows it--where indicated)
<style>
#special_widget {width:39px;margin:0;padding:0;cursor:pointer;overflow:hidden;position:fixed;text-indent:-100000px;top:25%;z-index:100000;left:auto !important; margin-left:-12px !important}
#special_widget a {display:block;width:39px;}
#special_widget a:hover {margin-left:4px;}
#special_widget a.feedback_btn {background:url(btn_feedback.gif) no-repeat;height:91px}
</style>
<p style="height:500px;color:white;background:#999999">This is an html page</p>
<div id="special_widget">
<a href="#" onclick="feedback_widget.show()" class="feedback_btn"></a>
</div>
<script type="text/javascript" charset="utf-8">
var is_ssl = ("https:" == document.location.protocol);
var asset_host = is_ssl ? "https://s3.amazonaws.com/getsatisfaction.com/" : "http://s3.amazonaws.com/getsatisfaction.com/";
document.write(unescape("%3Cscript src='" + asset_host + "javascripts/feedback-v2.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript" charset="utf-8">
var feedback_widget_options = {};
feedback_widget_options.display = "overlay";
feedback_widget_options.company = "YOURCOMPANYNAME";
feedback_widget_options.placement = "hidden";
feedback_widget_options.color = "#222";
feedback_widget_options.style = "idea";
var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);
</script>
I’m hackily employed
2 people think
this is one of the best points
-
Inappropriate?I am trying to change the text by using a different image in the widget, but unfortunately the code above doesn't work in IE; neither does the code here:
http://getsatisfaction.com/getsatisfa...
Could the image path and size maybe be put into feedback_widget_options? I'm testing with IE 7 & 8 under Windows XP. -
Inappropriate?Thanks for the help on this thread. I was able to customize my feedback tab to match my shopping cart tab from Cartloom. What do you think?
http://joeworkman.net
EMPLOYEE
EMPLOYEE
EMPLOYEE
