Enqueue External JS Wordpress-CodePudding

I'm struggling to understand how to enqueue an external js file with some widget code within Wordpress. For example: there is a Frontapp chatbot that has to have the following code placed into the end of the tag with my theme:

<script src="https://chat-assets.frontapp.com/v1/chat.bundle.js"></script>
<script>
  window.FrontChat('init', {chatId: '0xxxx', useDefaultLauncher: true});
</script>

How would I enqueue this since there's both an external link & snippet of Js?

CodePudding user response：

You can use wp_enqueue_script for external scripts as well as wp_add_inline_script for inline scripts.

In your case that would be.

wp_enqueue_script('my-chat-assets', 'https://chat-assets.frontapp.com/v1/chat.bundle.js');
wp_add_inline_script('my-chat-assets', "window.FrontChat('init', {chatId: '0xxxx', useDefaultLauncher: true});");

Those lines should appear in wp_enqueue_scripts hook like all other enqueued scripts. If you want it at the footer, add true to the footer parameter. So all in all:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('my-chat-assets', 'https://chat-assets.frontapp.com/v1/chat.bundle.js', [], false, true);
    wp_add_inline_script('my-chat-assets', "window.FrontChat('init', {chatId: '0xxxx', useDefaultLauncher: true});");
});

CodePudding user response：

I hope this will solve your problem.

add_action('wp_footer', function () {
    wp_enqueue_script('my-chat-assets', 'https://chat-assets.frontapp.com/v1/chat.bundle.js', [], false, true);
    wp_add_inline_script('my-chat-assets', "window.FrontChat('init', {chatId: '0xxxx', useDefaultLauncher: true});");
});