HI Service Portal (HI Help and Feedback) Floating buttons

Michael160 · ‎04-12-2017

Does anyone know how HI support is doing this on their Service Portal? These buttons that follow me on their Portal. I can click on feedback and complete a survey. I would like to do this on our service portal.

stefanpetrovic · ‎05-03-2017

Michael,

Sorry for a late reply.

You can define it almost anywhere. On a widget level, page, etc

There are two parts that have to have a matching ID. First is on the <button> element and second on a modal (check red highlight)

You chose ID name, but they have to match. If you have more them one modal, you have to have more unique IDs

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Feedback">Feedback</button>

</div>

<h4 class="modal-title" id="myModalLabel">Feedback</h4>

</div>

...

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Submit</button>

</div>

Hope this helps

View solution in original post

Teena Singh · ‎04-12-2017

Great to hear you are happy with the new widget.

Our team meets regularly with the Service Portal team and we will mention the customer interest in this widget. We have heard this from other customers as well.

Thanks.

Regards,

Teena Singh
Customer Experience: UX Strategy and Customer Insights
teena.singh@servicenow.com

ServiceNow

Screen Shot 2017-01-19 at 8.55.52 AM.png

Chuck Tomasi · ‎04-13-2017

HI Teena,

Any thoughts of sharing some of these popular widgets on Share?

Teena Singh · ‎04-13-2017

Good suggestion Chuck. I will mention this to the Dev team so they can do this.

-Teena

sreejith_nair12 · ‎08-10-2017

Hi Teena,

Please let me know if there is any update on having these widgets on Share.

Thanks,

Sreejith

stefanpetrovic · ‎04-19-2017

If you asking how to position buttons to stick to bottom of your screen then you can do that easily with css

.sticky-btn { bottom: 0; position: fixed; right: 20px; }

Here you can find example that will trigger dialog: https://jsfiddle.net/stefanpetrovic/q6r40s9s/1/

Hope that helps!