display cat image in iframe

GatherInsurance · Nov 28, 2018 · ddf0e48 · ddf0e48
1 parent 0bdfe56
commit ddf0e48
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/v2/support/secure_settings_sample_app/assets/iframe.html b/v2/support/secure_settings_sample_app/assets/iframe.html
@@ -5,14 +5,19 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/[email protected]" type="text/css">
 </head>
 <body>
-  <h2 class="u-gamma">Check your browser console for a handy-dandy message returned
-    from a (hopefully) successful API handshake with thecatapi.com!</h2>
+  <img class="cat-picture" height="200" width="250"></h2>
   <!-- https://github.com/zendesk/zendesk_app_framework_sdk -->
   <script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
   <script>
     // Initialise the Zendesk JavaScript API client
     // https://developer.zendesk.com/apps/docs/apps-v2
     var client = ZAFClient.init();
+
+    function renderImage(catPictureLink) {
+      var catPictureElement = document.querySelector("img[class='cat-picture']");
+      catPictureElement.src = catPictureLink;
+    }
+
     client.on('app.registered', function() {
       var settings = {
         url: 'https://api.thecatapi.com/v1/images/search?format=json',
@@ -21,10 +26,11 @@ <h2 class="u-gamma">Check your browser console for a handy-dandy message returne
         type: 'GET',
         contentType: 'application/json'
       };
-      client.invoke('resize', { width: '100%', height: '200px' });
       client.request(settings).then(function(data) {
-        console.log(data);
+        var cat_image_link = data['0']['url'];
+        renderImage(cat_image_link);
       });
+      client.invoke('resize', { width: '100%', height: '200px' });
     });
   </script>
 </body>