onclick event

@carpincraig

Tough to troubleshoot without a URL.
Did you include the js in your theme ?
<script>
jQuery(document).ready(function() {
setTimeout(function(){SleekNote.triggerOnclick(‘SLEEKNOTE ID HERE’);}, 3000);
});
</script>

Hi

Thanks very much for taking the time to look at my post and try to help!

I have a tracking code for the sleeknote popups on the site in the header for popups that are triggered on certain actions on the site.

And i understand i need to add to add the java code for the onclick triggers.

I have been trying to do this in a code module by adding the image and the onclick code (more or less as i would do in dreamweaver) but each time its saved the code disappears.

this is how it should look

but after its saved it just reverts to

sorry this is how the code should look

img onclick=”SleekNote.triggerOnclick(‘055f5a3e-53b6-495f-bc72-221df7526f44’);” src=”https://www.husispanien-marbella.se/wp-content/uploads/sites/178/2019/10/hot-villas.jpg&#8221;

but it reverts to this when saved

img src=”https://www.husispanien-marbella.se/wp-content/uploads/sites/178/2019/10/hot-villas.jpg&#8221;

@carpincraig

I don’t use Divi, but are you sure you are inserting it as plain text, or using the HTML module ?
https://www.elegantthemes.com/documentation/divi/code/

Generally speaking, JavaScript in post content is not safe from WP corrupting it. It’s better to add listeners to elements through external script than to try to add script as element attributes. Part of why jQuery is so popular is adding event handlers is really easy.

If adding onclick element attributes is imperative, it needs to be through some sort of shortcode or custom block mechanism so the actual script is hidden from WP content manipulation.

How would i create and implement the short code?

I have tried reading some posts on the subject but i really need a very simple example as to how i would do it …… step by step.

@carpincraig

The problem is that I don’t know where you expect this trigger to occur. Your original request seems to indicate you want it on the image.
But have you already gone through the docs ? They are pretty straightforward :
https://help.sleeknote.com/advanced-use/trigger-sleekbox-on-every-page-load

You can see here how I implemented in with the click on the img, and the click on the href :
https://shop.rossiterandco.com/onclick.html
If you want the click on the image tag, the way you have it right now it doesn’t “do anything” for the user.

I have a feeling you are not inserting into your theme properly, but it’s too hard to tell from here – so I would recommned asking the divi people. Or the SleekNote people.
https://help.sleeknote.com/

Seriously thanks so much for trying to help me… the sleeknote customer service is terrible to be honest.

I want the popup to be triggered by clicking the image as you demonstrated in your example.

I will go through the help page in your link and try to work it out…

In what part of wordpress are you adding the code? in a module?

@carpincraig

This works, yes ? Clicking on the image of the woman ?
https://shop.rossiterandco.com/onclick.html

Just use the html input editor :

      <div class="imagehere">
      <span class="et_pb_image_wrap ">

<a class="et_pb_promo_button" onclick="SleekNote.triggerOnclick('0eaf0bec-527e-493d-9e0a-f1ac5eacb9a8')"><img src="https://www.husispanien-marbella.se/wp-content/uploads/sites/178/2018/12/LOUISE-innovative.jpg"></a>

      </span></div>

Yes thanks … I can see it works for you

but when i save it wordpress seems to strip out the code for the onclick event just leaving me with the image

I have set this up before in an older versions of wordpress and dreamweaver very easily… but now i am struggling with this version of wordpress.

Obviously i am no expert with it.

I have been trying to add the code in a code or as code module in a text module.

Could i ask (and i know this probably sound stupid) how do i access the source code to edit it?

Maybe i should pay a professional to do it for me….. but i would like to learn so i can do it

@carpincraig

You’re using this method ?

yes that is what i have been doing.

I think i may need to create and use a shortcode as everything related to the onclick event disappears, but its not something i have done before to be honest

@carpincraig

Sorry, but I’m out of ideas.
I see no reason why this should not work as expected. It’s not exactly complicated!
Try the shortcode method I guess.

The thing with JS in post content is simple JS will survive OK, but more elaborate code can get corrupted. The inconsistent handling causes confusion. If you’ve not seen it yet, the WP shortcode doc is here. IMO, in the long run you’re better off using shortcodes anyway.

One common error people make with shortcodes is having their handler function echo out content. Don’t do that. All content to be output must be collected into a variable that the handler returns for WP to output at the proper time.