Last active
November 10, 2019 23:13
-
-
Save KristofferBerg/39e2522d53ea0fde9ce49ddb88ca7e6c to your computer and use it in GitHub Desktop.
This demonstrates the BrandApp.io integration which allows any online application to open BrandApp from a modal / window. From here you can use BrandApp as normal, but in addition you have a "Insert Now" button which pushes your design into the parent application. https://brandapp.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Your Application</title> | |
| </head> | |
| <body> | |
| <h1>Your Application</h1> | |
| <h3>Media List</h3> | |
| <div id="media-list"> | |
| <!-- list of added images from BrandApp --> | |
| </div> | |
| <button onclick="showModal()">Add BrandApp Media</button> | |
| <pre id="payload"></pre> | |
| <div id="modal-wrapper" onclick="hideModal()"> | |
| <div class="modal"> | |
| <iframe | |
| id="brandapp-iframe" | |
| style="width: 100%; height: 100%; border: none;"> | |
| </iframe> | |
| </div> | |
| </div> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 20px; | |
| font-family: sans-serif; | |
| } | |
| #media-list { | |
| background: #eee; | |
| width: 100%; | |
| min-height: 200px; | |
| margin-bottom: 30px; | |
| } | |
| #media-list img { | |
| max-width: 200px; | |
| max-height: 200px; | |
| margin: 20px; | |
| } | |
| button { | |
| background: #444; | |
| color: #fff; | |
| border: none; | |
| padding: 20px; | |
| } | |
| button:hover { | |
| background: #333; | |
| } | |
| #modal-wrapper { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,.9); | |
| } | |
| #modal-wrapper .modal { | |
| border-radius: 10px; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 100px; | |
| right: 100px; | |
| bottom: 100px; | |
| left: 100px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function showModal(){ | |
| // Open generic modal | |
| document.getElementById('modal-wrapper').style.display = 'block'; | |
| // Set BrandApp iframe source | |
| if ( !document.getElementById('brandapp-iframe').src ) { | |
| var params = { | |
| btnText: 'Insert Now', // default: 'Insert' | |
| btnBackground: '#444444', // default: '#444444' | |
| btnColor: '#ffffff', // default: '#ffffff' | |
| navigationOpen: false, // false | |
| }; | |
| document.getElementById('brandapp-iframe').src = 'https://app.brandapp.io/?embedParams='+encodeURIComponent(JSON.stringify(params)); | |
| } | |
| } | |
| function hideModal(){ | |
| // Hide generic modal | |
| document.getElementById('modal-wrapper').style.display = 'none'; | |
| } | |
| function handleIframeTask(e) { | |
| if (e && e.data) { | |
| // Output all payload data into the <pre> tag | |
| document.getElementById('payload').innerHTML = JSON.stringify( e.data, null, 4); | |
| // Append preview image from BrandApp | |
| var brandAppImage = document.createElement('img'); | |
| brandAppImage.setAttribute('src', e.data.media.preview ); | |
| document.getElementById('media-list').appendChild(brandAppImage); | |
| // Hide generic modal | |
| hideModal(); | |
| } | |
| }; | |
| // Listen for window events from BrandApp iframe | |
| window.addEventListener('message', this.handleIframeTask); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment