I need to add a chat widget in HTML, css and js, on all WP website. I tried the following in local (functions.php) and it worked fine but just on homepage. Same code online and nothing shows up. Any advice? Thank you in advance :)

<?php
     function add_chat ( ) { 
     ?>
            <script type="text/javascript">
            SERVICE_PATTERN_CHAT_CONFIG = {
                appId: '',
                clientId: '',            /* no need to change this */
                apiUrl: '',
                tenantUrl: '',
                width: 300,
                chatPath: ''

            };
            </script>
            <script type="text/javascript" src="js/snippet.js"></script>
    <?php
        }

add_action ('wp_footer', 'add_chat' );?>

I need to add a chat widget in HTML, css and js, on all WP website. I tried the following in local (functions.php) and it worked fine but just on homepage. Same code online and nothing shows up. Any advice? Thank you in advance :)

<?php
     function add_chat ( ) { 
     ?>
            <script type="text/javascript">
            SERVICE_PATTERN_CHAT_CONFIG = {
                appId: '',
                clientId: '',            /* no need to change this */
                apiUrl: '',
                tenantUrl: '',
                width: 300,
                chatPath: ''

            };
            </script>
            <script type="text/javascript" src="js/snippet.js"></script>
    <?php
        }

add_action ('wp_footer', 'add_chat' );?>

• widgets
• javascript
• html

2 Answers 2

Try to include your inline script at the bottom of your snipper.js file, and then enqueue it using wp_enqueue_scripts():

function my_chat_script() {
    wp_enqueue_script( 'chat-js', 'URL OF SNIPPER HERE', false );
}
add_action( 'wp_enqueue_scripts', 'my_chat_script' );

This is the proper way to include scripts in your WordPress using functions.php file.

However, if you insist on adding them separately, you can use wp_add_inline_script():

function chat_script() {
   wp_enqueue_script( 'my-chat-script', 'SNIPPER URL HERE', array(), '1.0' );
   wp_add_inline_script( 'my-chat-script', 'SERVICE_PATTERN_CHAT_CONFIG = {appId: '0ef0636b4c36497b866322a096926049', clientId: 'WebChat',apiUrl: 'https://poc.3d2b.ccaas.becloudsolutions.com:9443/clientweb/api/v1',tenantUrl: '3d2b.com',width: 300,chatPath: ''};' );
}
add_action( 'wp_enqueue_scripts', 'chat_script' );

This will output your snippet and inline script separately.

thank you for your answer. Eventually, I managed to add the chat using wp_register and wp_enqueue like this:

function add_chat_scripts() {
    wp_register_script( 'chat', get_template_directory_uri() . '/js/chat.js' , array(), true );
    wp_register_script( 'chat-snippet', get_template_directory_uri() . '/js/snippet.js', array('chat') );
    wp_enqueue_script  ('chat');
    wp_enqueue_script('chat-snippet');
}
add_action( 'wp_enqueue_scripts', 'add_chat_scripts' );

And it worked. But now, the problem is the chat shows up only in homepage and nowhere else. How can I solve that? You can see the chat here (It's not working in chrome and firefox though)

I tride the wp_register, etc on local. Online there's still the inline script, but is working anyway.

Thank you in advance