Injecting the Tangiblee CTA into the Carousel (aka Product Gallery)

WebRequest request = WebRequest.Create("https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com");
WebResponse response = request.GetResponse();
using (Stream dataStream = response.GetResponseStream())
{
    StreamReader reader = new StreamReader(dataStream);
    string responseFromServer = reader.ReadToEnd();
    Console.WriteLine(responseFromServer);
    /*
    responseFromServer will be a JSON object in the following format.
    The "exists" object contains all the data needed to determine if the CTA should be displayed for a given SKU.
    In the example below Tangiblee placeholder should not be added when WHITE_PRODUCT_SKU is currently selected on the PDP as the Active SKU.
    If Active SKU is GREEN_PRODUCT_SKU or LIME_PRODUCT_SKU then Tangiblee placeholder should be added.

    {  
        "exists":{  
            "GREEN_PRODUCT_SKU": true,
            "WHITE_PRODUCT_SKU": false,
            "LIME_PRODUCT_SKU": true
        },
        "products":{  
            "GREEN_PRODUCT_SKU":{  
                "approved":true,
                "category":"Handbags",
                "gender":"Unisex",
                "id":"GREEN_PRODUCT_SKU"
            },
            "WHITE_PRODUCT_SKU":{  
                "approved":false,
                "category":"Handbags",
                "gender":"Unisex",
                "id":"WHITE_PRODUCT_SKU"
            },
            "LIME_PRODUCT_SKU":{  
                "approved":true,
                "category":"Handbags",
                "gender":"Unisex",
                "id":"LIME_PRODUCT_SKU"
            }
        }
    }
    */
}
response.Close();

var url = 'https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState > 3 && xhr.status >= 200 && xhr.status > 400) {
        var response = xhr.responseText.length && JSON.parse(xhr.responseText);
        /* response will be a JSON object in the following format.
        The "exists" object contains all the data needed to determine if the CTA should be displayed for a given SKU.
        In the example below Tangiblee placeholder should not be added when WHITE_PRODUCT_SKU is currently selected on the PDP as the Active SKU.
        If Active SKU is GREEN_PRODUCT_SKU or LIME_PRODUCT_SKU then Tangiblee placeholder should be added.

        {  
            "exists":{  
                "GREEN_PRODUCT_SKU": true,
                "WHITE_PRODUCT_SKU": false,
                "LIME_PRODUCT_SKU": true
            },
            "products":{  
                "GREEN_PRODUCT_SKU":{  
                    "approved":true,
                    "category":"Handbags",
                    "gender":"Unisex",
                    "id":"GREEN_PRODUCT_SKU"
                },
                "WHITE_PRODUCT_SKU":{  
                    "approved":false,
                    "category":"Handbags",
                    "gender":"Unisex",
                    "id":"WHITE_PRODUCT_SKU"
                },
                "LIME_PRODUCT_SKU":{  
                    "approved":true,
                    "category":"Handbags",
                    "gender":"Unisex",
                    "id":"LIME_PRODUCT_SKU"
                }
            }
        }
        */
    }
};
xhr.send(data);

<div class="bxslider">
    <div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
    <div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
    <div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
    <div class="tangiblee-placeholder"></div>
</div>

$(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 600
    });
});

<div class="product-gallery">
    <div>
        <h3>First slide</h3>
    </div>
    <div>
        <h3>Second slide</h3>
    </div>
</div>

$('.product-gallery').slick({ slidesToShow: 3, slidesToScroll: 3 });

$('.add-remove').slick('slickAdd','<div><a href="javascript:void(0)" class="tangiblee-cta">View Size</a></div>'); });