Docs

[smoothjapan]

Hi there,

I’m using the Intercom plugin on my homepage and have linked up a button to the Intercom Script to start a chat. I’ve done it over a class rather than an ID and then added the script on Customize > Global Javascript.

This works beautifully on Desktop. However on mobile the anchor javascript(?) seems to override the chat window becoming active.

I’m aware you don’t do custom development or third party plugin support, but I think I only need an option to either:

1) Disable the anchor functionality for that button.
2) Create the same style button (Transparent Pill) via pure inline css so I can add it all as code block.

Is either a goer?

[Lely]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we can check which option above is possible.

Always,
X

[smoothjapan]

Please refer to the private reply in this post: https://community.theme.co/forums/topic/wpml-wont-appear-after-menu/

The buttons I’m referring to are placed at https://smoothjapan.com/en/assist/

[Friech]

Hi There,

Thanks for the credentials, you mean with option 2 is to hardcode the button with inline styling? That would be:

<a class="startchat" style="padding-top:10px;padding-bottom:10px;font-size: 19px;border-radius: 100em;color: #f4ad07;border-color: #f4ad07;background-color: #fff;" href="#features" data-options="thumbnail: ''">Chat with my Assistant NOW</a>

Hope it helps, Cheers!

[smoothjapan]

Thanks, interestingly that even works with the href anchor reference.

However, the button is not styled the way I did.

Things that are missing:
– Pill shaped border
– background color change on hover;
– SmallCaps as font

Please see attached picture for comparison.

[Jade]

Hi there,

Please try this CSS:

a.startchat {
    text-transform: capitalize;
    border-radius: 100em;
}

a.startchat:hover {
    border-color: #f4ad07;
    background-color: #f4ad07;
}

Hope this helps.

[smoothjapan]

Hi there, sorry for the late reply.

I tried that CSS Code but it didn’t affect anything.
Besides, wouldn’t it be simpler to stay with Inline CSS?

Either way, the location of the button is at https://smoothjapan.com/en/assist after the “How can we help you. The original button and then the raw content button below.

[Rue Nel]

Hello There,

1] To disable the anchor functionality for that button, please update your JS code:

/*Start Intercom Chat*/
jQuery('.startchat').on('click', function(e){
   Intercom('showNewMessage');
   e.preventDefault();
   return null;
}); 

2] You can use a button html code in a raw content element;

<button class="x-btn aligncenter startchat x-btn-global x-btn-block" style="padding-top:10px;padding-bottom:10px;">Chat with my Assistant NOW</button>

And to style it, you need to have a custom css

button.startchat.x-btn-global.x-btn-block {
    text-transform: normal !important;
    font-weight: small-caps;
    background-color: #fff;
    color: #f4ad07;
}

button.startchat.x-btn-global.x-btn-block:hover {
    background-color: #f4ad07;
    color: #fff;
}

Hope this may help.

[smoothjapan]

Nice going!
I don’t think the JSS deactivated the Anchor JS, but the other method worked perfectly.
Thanks for the continued support.

X Theme is awesome. The only reason I survived switching from SquareSpace back to WordPress.

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts