Run Java Script in Wordpress

Question

I have bought one WordPress theme which have Live Chat button in header. Its support link to open chat. But I have got java script to open button. I am learning php and does not know how can I run java script on button press WordPress.

I have code in wordpress header theme is like below

<?php }if( !empty( $king->cfg['topInfoLiveChat'] ) ){ ?> 
 <a href="<?php echo esc_attr( $king->cfg['topInfoLiveChat'] ); ?>" class="chat">
 <i class="fa fa-comments-o"></i> <?php _e('Live Chat', 'arkahost' ); ?>
 </a>

Zopim chat have given me script to run is like below.

$zopim.livechat.window.show(); 

They have given example to include like below

<a href="javascript:$zopim.livechat.window.show()"><img src="INSERT_IMG_SRC_HERE"/></a>

But if I use like above my design getting changed. Anyone can please help me how can I integrate this script in my above codes ?

Thanks

• Maxwell s.c: You can install an plugin to insert code on the Footer - this way, you can insert scripts without change the theme files.
• Kevin.a: You can use a plugin for custom javascript.

Answer 1

Did you learn some javascript and jQuery? You can run codes when an event happen. Like you have clicked a ahref element with .chat class.

<script>
 jQuery("a.chat").on("click", function(e) {
 e.preventDefault();
 // Your code goes here. Example:
 $zopim.livechat.window.show();
 });
</script>

P/s: you should have a better selector like .header a.chat, or all ahref element have .chat class will show your Zopim windows when users clicked on it.

• Paresh Sharma: Hi ! I just need add code that You have written or I need modify any other codes also ? Thanks
• Argus Duong: Yes, you only need add my code to anywhere, or custom javascript section if your theme have that. There's no need to edit any theme's files.

Answer 2

Remember use 'jQuery' instead of '$' in wordrpess.

Answer 3

If you would like to add the code in JS like:

$zopim.livechat.window.show(); 

and fire it on click event on your button, you need just to add the script (if you have jquery) to your file (with button):

<script type="text/javascript">
 jQuery('a.chat').on('click', function(e) {
 e.preventDefault();
 $zopim.livechat.window.show();
 });
</script>

or add it to the JS file, that included into your page:

jQuery('a.chat').on('click', function(e) {
 e.preventDefault();
 $zopim.livechat.window.show();
 });

Where a.chat is the link (<a href=""></a> tag) and .chat is the class name of your link, like in your example. You can add the parrent elements.

e.preventDefault() - default event for the link will not fire

Thanks