Topic: How to Change beacon icon & color?

ankitispace
(@ankitispace)

1 year, 4 months ago

Hello,
I want to change beacon color & icon. I tried for that but it not work.
I tried below code:
<script>
HS.beacon.config({
color: ‘#000000’
});
</script>
but it not works.

How can I change Beacon color & icon?
Help me.

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author Dan Cameron
(@dancameron)

1 year, 4 months ago

Hello,

You should add the configuration to your embed code that you’ve added within the admin.

Can you share what you’ve added?

Regards,

srumery
(@srumery)

1 year, 4 months ago

+1 on this. It would be nice to at least change the color of the Beacon through the admin. Currently, the color is hardcoded on the HTML element. On top of that, it’s in an iframe which complicatees it even further.

Plugin Author Dan Cameron
(@dancameron)

1 year, 4 months ago

Hello,

Adding the color attribute to the beacon code that you paste into the admin would/should change the color for you.

srumery
(@srumery)

1 year, 4 months ago

Dan, can you provide a Gist with the code to change the color of the beacon please? That would be very helpful.

Plugin Author Dan Cameron
(@dancameron)

1 year, 4 months ago

You can provide me with your beacon code and I’ll share it as an example.

http://developer.helpscout.net/beacons/customization/
ankitispace
(@ankitispace)

1 year, 4 months ago
Beloew code I attached.

<script>
HS.beacon.config({
color: ‘#000000’
});
</script>

<!– Help Scout Beacon Code –>
<script>!function(e,o,n){window.HSCW=o,window.HS=n,n.beacon=n.beacon||{};var t=n.beacon;t.userConfig={},t.readyQueue=[],t.config=function(e){this.userConfig=e},t.ready=function(e){this.readyQueue.push(e)},o.config={docs:{enabled:!0,baseUrl:”//mysite_url/”},contact:{enabled:!0,formId:”e49b3b80-c297-11e6-91aa-0a5fecc78a4d”}};var r=e.getElementsByTagName(“script”)[0],c=e.createElement(“script”);c.type=”text/javascript”,c.async=!0,c.src=”https://djtflbt20bdde.cloudfront.net/”,r.parentNode.insertBefore(c,r)}(document,window.HSCW||{},window.HS||{});</script>

here, i Change mysite_url is my site url..
What changes need to do in this code??
- This reply was modified 1 year, 4 months ago by ankitispace.
srumery
(@srumery)

1 year, 4 months ago

ankitispace,

Try putting the extra script below the Help Scout Beacon Code script. That worked for me.

Here is an example:
http://developer.helpscout.net/beacons/customization/

ankitispace
(@ankitispace)

1 year, 4 months ago

Thank you,srumery
Now it works for me also.