Run your own JavaScript when a shopper clicks a message

You can run your own JavaScript when a shopper clicks a NotiFeed or NotiPop button, or after NotiSell adds a product to the cart, for example to open another app's widget or keep the shopper on the page.

Where you can add code

• NotiFeed and NotiPop: on the Setup tab, switch on Call to action and type your code in Custom JavaScript (optional). It runs on click, in place of the link.
• NotiSell: under Add to cart button, tick Add product to the cart to show Custom Function After Add to Cart. It runs after the product is added, instead of opening the cart page.

Each message has its own code, up to 500 characters. For longer code, call a function you add to your theme.

Atomato saves the code as typed and doesn't check it. It runs for every shopper who clicks, so only add code you trust. Set up Atomato for a team or agency explains who can add it.

Fill in Button link before you add code

Button link is required with Call to action on, even though your code replaces it. It locks, along with Open in new tab, as soon as Custom JavaScript (optional) has text. Type the link first, then the code. To change the link later, cut the code, edit the link, then paste the code back.

A NotiPop also needs Button text. A NotiFeed needs it only with Expand details. For the other fields, see Add an announcement to the NotiFeed.

When NotiFeed and NotiPop code runs

Code runs only when a shopper clicks, and only while Call to action is on. The shopper clicks:

• NotiFeed with Button text: the button. With Expand details and an image or emoji, it is inside the opened message.
• NotiFeed with Open link and no Button text: the whole message.
• NotiPop: the button.

The code runs on your store page, so it can call functions your theme or other apps make available there. Atomato leaves the feed open: it closes as usual on a scroll or a click outside it, including a click your code makes on the page. A NotiPop stays until it is closed or hides on its own.

If the code throws an error, the shopper sees nothing and the browser console shows Notifeed custom CTA function error: or Notipop custom CTA function error:.

When the NotiSell function runs

Atomato first adds one of the chosen variant to the cart, with any chosen subscription. Your function runs only once your store accepts the product, and the feed closes a moment later.

• Don't add the product again. Atomato doesn't refresh your theme's cart, so your code should update the cart count or drawer.
• If your function throws an error, Atomato opens the cart page instead, and the console shows Notisell custom CTA function error:.
• If the product can't be added, your function doesn't run and the feed closes.

Examples

• After a NotiSell add, reload the page so the header shows the new cart count: window.location.reload();
• Open your theme's cart by clicking its cart icon: document.querySelector('.header__icon--cart').click(); That's Dawn's cart icon, so swap in your theme's selector. Some drawers show the cart as it was at page load, so check the new item appears.
• Open another app's widget, as in the field's placeholder window.ReferralApp.open();, using the function name from that app's documentation.

Don't call Atomato's own script objects: they aren't a supported API and can change in any update. The storefront reference for developers lists the element names Atomato uses.

How clicks are counted

Clicks on a button with code count in Analytics, but a NotiFeed or NotiPop button with code doesn't start revenue tracking, while NotiSell's add to cart does.

Test your code

The Store preview removes your theme's scripts and only pretends to add to the cart, so test on your store with the campaign Active and the console open.

A NotiPop that was hovered over, clicked, closed or hidden on its own doesn't show again in that browser, so close every private window and open a new one before each test. Test clicks count in Analytics, so keep them few.