The Gospel / Javascript

You can share The Gospel on any website if you are using the jQuery framework and are able to add raw HTML code and JavaScript to the page. This way is more flexible than the IFrame method because you can fully adjust the design using Cascading Style Sheets (CSS), but it does require permission to add JavaScript tags to the page.

Most Content Management Systems (CMS) can allow you to do those things, but it is an advanced feature and often the permission is only available to the top administrators.

If you want to try an easier way instead, look at the IFrame method.

Step 1:

Create a tag on the page where you want The Gospel to be displayed in:


<!-- © The Gospel, by Adonai Reigns ("God did not send His son to condemn the world!") - Share The Gospel on your website! Go to www.Adonai-Reigns.life/tools -->
<div class="the-heart" style="height:400px;width:600px;overflow:hidden;position:relative;font-family:sans-serif;">
 <img src="//static.adonai-reigns.life/the-gospel/20191017-mobile/cover-butterfly-front.jpg"
 class="the-gospel-coverpage" alt="The Gospel" width="400" height="600" />
</div>

Notice that you can use any class name attribute that you like, and you can even use a different jQuery selector (for example, and HTML ID). If you do change the class name attribute (class="the-heart"), then you also will need to change the jQuery selector on the next step.

Step 2:

Place the following JavaScript code wherever you prefer, so long as it is executed after including the jQuery library. (It is normal that all script tags such as this are placed in an external JavaScript file or at the bottom of the page, just before the closing body tag). If it is possible to put it with the code of Step 1, that will work fine.


<script>
 // © The Gospel, by Adonai Reigns ("God did not send His son to condemn the world!") - Share The Gospel on your website! Go to www.Adonai-Reigns.life/tools
 $('.the-gospel-coverpage').on('load', function(){
 (function(a,m,e,n){var w=window,d=document;w['TheGospelObject']=a;
 w[a]=w[a]||function(){(w[a].q=w[a].q||[]).push(arguments)},w[a].l=1*new Date();
 w[a].s=function(f,s,hs){var j,c;s=s||'text/javascript',hs=hs||null;j=d.createElement('script');
 j.crossorigin=1;j.type=s;if(hs!==null)j.id=hs;c=d.getElementsByTagName('script')[0];
 j.async=1;j.src=f;c.parentNode.insertBefore(j,c);};
 w[a].l=function(h,o,l,y){var j,c;j=d.createElement('link');j.crossorigin=1;j.rel=o||'stylesheet';
 l=l||null;if(l!==null)j.id=l;j.onload=y||function(){};c=d.getElementsByTagName('script')[0];
 j.async=1;j.href=h;c.parentNode.insertBefore(j,c);};
 w[a].s(m);w[a].l(e);w[a].s(n);
 })('TheGospel','//static.adonai-reigns.life/the-gospel/the-gospel.js',
 '//static.adonai-reigns.life/the-gospel/sz-booklet.css','//static.adonai-reigns.life/the-gospel/sz-booklet.js');
 TheGospel('pourInto', '.the-heart');
 });
</script>

.. and now you should see The Gospel on your own website, exactly where you want it!