Where to add script in x-pro header using child theme

Support
#1

My website: futurefitness.dk (SSL not installed yet hence the warning)
I am using: X Pro 1.1.1

I need to add the following global javascript snippet to my header, in order to show a widget that allows visitors to sign up for my messenger bot:

<!-- ManyChat -->
<script src="//widget.manychat.com/714323188721850.js" async="async">
</script>

However, I cannot find the correct file to copy to my child theme.
I read in an old post that I should copy _header.php from the global folder, but that does not exist in my current version of x pro.
I do however have the folder called header with two files: base and masthead.

Another way I found was adding this code in the functions.php file in the child theme, however it isn’t working for me, and I am not sure where my mistake lies.

add_action( ‘wp_head’, ‘add_head_script’, 999 );
function add_head_script(){
?>
<!-- Your scripts will go here -->

<?php }

To test the code, I have added a code that should show a signup button just below the first big orange button, in between the two grey lines.:

<div class="mcwidget-embed" data-widget-id="560782"></div>

Please help me understand where the issue lies, which file, and where in the file, I need to use for this code javascript code to properly show my widget.

I also read in another post that _header.php in the …legacy/cranium/… was used for Google tag, is that a good place in general, or is it only for the tag and possibly Google Analytics? - This is also interesting for me to know for later purposes.

Thank you so much for a detailed answer!!

#2

Hey,

You can try to add the JS custom code at X > Launch > Options > JS

#3

I already tried that. And just did it again. The code goes in the body section and does not work.

Please give me a DETAILED answer. I am no newbe to this.

#4

Hi there,

Since you will have to load a script in the header, you can load this code in the functions.php file in the child theme:

add_action( 'wp_head', 'add_head_script', 999 );

function add_head_script(){
?>
    <!-- ManyChat -->
    <script src="//widget.manychat.com/714323188721850.js" async="async"></script>
<?php
}

Once you do that, the JS fie required for your chat service should get loaded on the site.

Then you can add this code:

<div class="mcwidget-embed" data-widget-id="560782"></div>

in a Raw Content element in Cornerstone.

In case this doesn’t work. Please provide the URL of your site.

1 Like
#5

Hi there Jade

Thanks for your reply, but I have already tried this as I wrote above, and it doesn’t work for me… :frowning:

The URL for my site is at the top of my first message. The SSL has been installed now, so there should be no warning.

#6

Hey @Shortaxe,

I was just doing the same thing today and it worked for me with the code in functions.php. Did you activate the Growth Tool in ManyChat? (the toggle is in the top right hand corner, beside the save button).

#7

Hello @Shortaxe,

I have followed Jade’s suggestion. I added the code in my Pro child theme’s functions.php file and I added the code in a raw content element. I hit save and viewed the page live. I am seeing this:

Please try again @Jade’s solution and also please do forget to remove the code you have added in the customizer’s custom JS.

If nothing is working, please give us access to your site so that we can take further investigation.

Please let us know how it goes.

#8

I’m overwhelmed by all you helpfull people, thank you so much! But I still cannot seem to find my problem. I cannot get the code to work :confused:

@yvrcon Thank you for you suggestion! But I have already activated the widget and whitelisted my domain, so I don’t think that is where the problem is.

@RueNel I have tried the weirdest things just to make it work, but still to no avail. Right now the code is in my functions.php in my child theme, and the snippet is in a raw element below the first orange button.

I’ll give you my login, and hopefully you can see what I cannot.

#9

Hi there,

You will have to activate the child theme in order for the code you have added to it to take effect.

Hope this helps.

1 Like
#10

OMG! Jokes on me :joy:

Please take my sincerest apologies… I just moved the site to a new domain, and must have forgotten to activate my newly added child theme in the process.

Thank you so much for bearing with me

#11

No problem.
We’re just glad we were able to help you out.