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?
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});");
});
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});");
});