Adding Instacart Affiliate Link Button to Bubble Not Working

[ecferrer]

I’m trying to add shoppable recipes to my recipe site. Instacart offers some scripts to help automate this. However, I’m not able to get it to work. I need to

1. add a code snippet to the header and,
2. another code snippet to the div tag where I’d like the button to appear

Could anyone help me figure out how to get this to work?

Copy and paste this script tag into your code.
<script> (function (d, s, id, a) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://widgets.instacart.com/widget-bundle-v2.js"; js.async = true; js.dataset.source_origin = "affiliate_hub"; fjs.parentNode.insertBefore(js, fjs); }) (document, "script", "standard-instacart-widget-v1"); </script>

Copy and paste this div tag wherever you want to show the Shoppable Recipe button.
<div id="shop-with-instacart-v1" data-affiliate_id="1545" data-source_origin="affiliate_hub" data-affiliate_platform="recipe_widget" \>

[johnny]

@ecferrer

Copy and paste this script tag into your code.
<script> (function (d, s, id, a) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://widgets.instacart.com/widget-bundle-v2.js"; js.async = true; js.dataset.source_origin = "affiliate_hub"; fjs.parentNode.insertBefore(js, fjs); }) (document, "script", "standard-instacart-widget-v1"); </script>

Paste this in your page header

@ecferrer

Put this in an HTML element.

[ecferrer]

Really appreciate the help Johnny!

For copying it into my code. Do you mean paste it into the “Script/meta tags in header” or “Script in body” or is there somewhere else in the settings that I can paste it?

For the HTML element is there any thing I need to do aside from pasting the <div… code into the element?

[johnny]

Is this for one specific page or your whole app? What does Instacart say to do?

[ecferrer]

It is for one page, a recipe page. But each recipe page is different, for example, it has different recipes. But they’re all structured the same way.

Instacart says to just copy the snippet into my code, but doesn’t give further details.

However, I’ve been able to get it working. The issue now is that the JSON/Schema for the page does not seem to be formatted correctly to pass the Ingredients text to Instacart. Do you happen to have any tips on getting pages formatted?

[johnny]

@ecferrer

It is for one page, a recipe page. But each recipe page is different, for example, it has different recipes. But they’re all structured the same way.

You can just add it to the HTML page header for that page then

@ecferrer

However, I’ve been able to get it working. The issue now is that the JSON/Schema for the page does not seem to be formatted correctly to pass the Ingredients text to Instacart. Do you happen to have any tips on getting pages formatted?

Screenshot?

[ecferrer]

So think I’ve gotten things to work. But Instacart is telling me the schema is incorrect. I’ve reached out to their support but I wanted to see if you had any tips on my JSON+LD Schema. I think the issue might be with recipeIngredient. I’m using find/replace to remove the html since the ingredients are bulleted.