ShowMoor unleashes creativity
FOR WEB DEVELOPERS

SM Code Examples, Technical Details and Test System Access


Your Access to The Test System

Two demo users have been created to the test system (smtest.eu).

The example user has a subscription and Cooins, for you to use. The creator user has Creator Access.


How to Add SM Code to Your Website

After you have generated your personal SM Code, it needs to be included into your HTML documents.

First things first, link ShowMoor CSS on the <head> section like this.

... 
  <head>
    <!-- ShowMoor CSS -->
    <link href='https://showmoor.com/sm_css/sm001.css' rel='stylesheet'/>
    ... 

As with any JavaScript, there are two options: you can copy the SM Code into your HTML files or employ an external file.

If you decide to copy SM Code into your HTML, you insert it between <script></script> tags.

<!-- example.html -->
<html>
  ...  
    <!-- SM Code -->
    <script>
    const a=['function(c,d){var e=function(f){while(--f){c['push'](c['shift']());}};e(++d);}(a));var b=function(c,d){c=c-0x0...
    </script>
  </body>
</html>

When you have several HTML pages using the same SM Code, saving the code into an external file is recommended.

// example.js
const a=['function(c,d){var e=function(f){while(--f){c['push'](c['shift']());}};e(++d);}(a));var b=function(c,d){c=c-0x0...

Then, you can provide a src attribute with a URL that points to the external script file.

<!-- example.html -->
<html>
  ...  
    <!-- SM Code -->
    <script src="example.js"></script>
  </body>
</html>

How to Ensure JavaScript Is Enabled

For those who have disabled JavaScript, it's advisable to hide the content and display a message like this:

<!-- insert this to the <head> on your pages -->
<noscript>
  <style> body * { display: none; } </style>
  <h3 style="display: block;margin: auto;width: 80%;text-align: center;color: #008833">
  Please enable JavaScript from your browser settings.
  </h3>
</noscript>

The Simplest Way to Hide Text (and Images) from Non-Buyers on a Web Page

This snippet below selects all the p elements and blurs and muddles the text on them.

You can use it on noShowMoor() and notPaidWithCooin() functions.

Check out the SM Cooin example here and video here.

Also, the webapp has Simple Paragraph Hider and Simple Image Hider examples for you to use.

// Select all the paragraphs
let p = document.querySelectorAll('p');
// Loop through them
for (let ele of p) {
  // Add blur to the element
  ele.setAttribute("style", "filter: blur(4px); pointer-events: none;opacity: .8");
  // Muddle the text without affecting tags
  let text = ele.innerHTML;
  ele.innerHTML = text.replace(/[haeEiuyksWwTt](?!([^<]+)?>)/g, 'o');
}

The Simple Image Hider replaces original images with a small placeholder.svg and sets opacity accordingly.

Apparently, some browsers do not load images having opacity 0 at all. That's good, saves bandwidth.


How to Implement an SM Button on Blogger

To generate income from your blog content, you can customize and insert SM Code into your Blogger theme/template.

You can see it in action on this video: How to Make Money on Blogger for Free.

The implementation is on this video: How to Add SM Button to Blogger using SM Code.

After you have selected your theme, you can start modifying its HTML via 'Edit HTML' option on dropdown list.

Let's start with editing the <head> section. To display an SM Button, link to the ShowMoor CSS is required. So, add these two lines:

... 
  <head>
    <!-- ShowMoor CSS -->
    <link href='https://showmoor.com/sm_css/sm001.css' rel='stylesheet'/>
    ... 

Also, to ensure JavaScript is enabled, the <noscript> section described up here needs to be inserted.

Next, it's time to fill in the SM Code settings for SM Button. Log in with your Creator Access account and select SM Button from Creator menu.

Then, select 'Example: Simple Paragraph Hider' from SM Code settings dropdown. Now, the yesShowMoor() and noShowMoor() fields are properly filled. Those contain the core functionality. For the rest of the settings, please consult the tooltips.

Finally, you generate SM Code and insert it into the end of the HTML. These two are specific to Blogger:

...
    <!-- Blogger conditional tag -->
    <b:if cond='data:blog.pageType == "item"'>
      <!-- SM Code -->
      <script>
        // <![CDATA[
        const a=['bmFtZQ==','dmFsdWU=','c3VibWl0','NDIwYzMwNDk=','M2M2ODg2Y2I=', ...
        // ]]>
      </script>
    </b:if>
  </body>
</html>

Now, single post pages are readable only for those who pay with their ShowMoor subscription.


Monetize Your JS that has a Main Loop (Game...)

When your site is based on a script with a continuously running loop, here's a quick way to monetize.

It's important to set script type to module. This prevents variable manipulation via DevTools console.


You add a new variable with false as initial value. For SM Buttons, it can be named e.g. isSubscriber. The variable controls whether the main loop executes its functions or not.

<script type="module">
let isSubscriber = false;
  ...
function game() {
  if (isSubscriber) {
      update();
      render();
  }
}
  ...
// SM Code
const a=['bGVuZ3Ro','c2hvd21vb3JfYWN0','aHR0cHM6Ly9zbXRlc3QuZXUveC94MDAucGhwP3NtaWQ9','JmlkeD0='...
</script>

With this line on The SM Code settings, the variable is set to true for subscribers:

async function yesShowMoor() {
  isSubscriber = true;
}

How to Utilize ChatGPT in SM Code Generation

Basically, SM Code gives these two functions for you to customize:

So, here are some useful prompt examples:

Well, this was unexpected:

I'm sorry, but I can't assist with generating a JavaScript function that intentionally makes the text on the page unreadable for paywall purposes or any other activity that goes against ethical guidelines.

We think it's ethical to provide ways for creators to get paid.


How to Load a Full Image for Subscribers Only - Featuring Server Side Magic

SM Code/JS is powerful. However, in this case, a couple of tiny server side scripts lend a hand.

Let's use Monet site as an example. It has three pages and a painting on each page.

You can open the site and click the SM Button:

As you can see from the HTML snippet below, everything's pretty basic.

The initial loaded image is of low quality, under 10 KB in size. Its path is:

/img/women-in-the-garden.jpg

<!-- monet_1.html -->
<body>
  <head>
    <!-- ShowMoor CSS -->
    <link rel="stylesheet" href="https://www.showmoor.com/sm_css/sm001.css">
  </head>
  <div>
    <img id="painting" src="/img/women-in-the-garden.jpg" style="width: 100%">
  </div>
  <!-- SM Code -->
  <script src="monet_smcode.js"></script>
</body>

The DOMContentLoaded event inside monet_smcode.js starts the SM Code execution.

As the SM Button has not yet been clicked, noShowMoor function is called.

The function gets the image element via id, and adds blur filter to it.

async function noShowMoor() {
  const ele = document.getElementById("painting");
  ele.classList.add("sm-blur");
}

Now, visitor clicks the SM Button for the first time.

As this is her first time, an active login session is needed. If there isn't one, she is redirected to ShowMoor login.

Then, if she has a subscription, she's redirected back to the painting page. There, yesShowMoor function is called and SM Button is minimized. On her next visit, yesShowMoor function is called automatically.

For those without subscription, noShowMoor function is called on every visit.

Let's see how the yesShowMoor function reveals the full image.

async function yesShowMoor() {
  const ele = document.getElementById("painting");
  let img_src = ele.src;
  let img_name = img_src.split('/').pop();
  ele.src = "/img/" + localStorage.showmoor_sid + "/" + img_name;
}

The function parses the image name from its src, getting women‑in‑the‑garden.jpg from https://monet.showmoor.com/img/women‑in‑the‑garden.jpg.

Then it generates a new path for the image by inserting localStorage.showmoor_sid into it.

The new path is set to the image and it gets reloaded. In this case from here:

/img/8960af3ce834fefd4a47776348d3db48/women‑in‑the‑garden.jpg

Now, the full image is revealed for subscribers. Hooray!


How The Low Quality Preview Images are Generated Automagically

The inspiration for the wizardry came from this Stack Overflow article.

Namely, from its .htaccess (Apache Configuration) file. If the requested file is not found, it opens file_not_found.php script passing the requested file name as parameter.

# Apache Configuration .htaccess 
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ file_not_found.php?f=$1 [L]

At first, both the /img and /img/ShowMoorSID folders are empty. They do not have any image files.

The full image files are on the file system, outside website folders.

Script 1: Lowers The Image Quality

I created a script that reads a full image from the file system, lowers its quality, saves and outputs it. I set the script name to a duplicated .htaccess file and saved them both to /img folder.

# .htaccess file on /img folder 
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ lower_the_quality.php?f=$1 [L]

It goes like this:

Script 2: Copies Full Image to Website Folder

The second script copies a full image from the file system to website folder and outputs it. Again, the duplicated .htaccess file points to the script. Both of the files are saved to /img/ShowMoorSID folder.

# .htaccess file on /img/ShowMoorSID folder 
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ copy_the_image.php?f=$1 [L]

It goes like this:


How to Load a Full Article and Images for Buyers Only

The example creator site is The Daily Martian. It's got two different pages utilizing the same SM Code.

To buy its content there, page by page, click the SM Cooin:

The snippet below contains the elements affected by the SM Code for the first page.

<!-- first page -- dmsha.html -->
<div class="sm-hide_to_bottom">
  <h2>TERRAFORMING MARS PROJECT - IS IT TOO AMBITIOUS?</h2>
  <p>[This text is visible to everyone] Human survival on Mars...</p>
</div>
<div id="sm_content"></div>
<!-- SM Code -->
<script src="dmsha.js"></script>

The SM Code checks if the contents on this page has been bought. If not, it calls the notPaidWithCooin() function.

async function notPaidWithCooin() {
  // Does this page have images that are visible only for those who have paid?
  let c = document.querySelectorAll('[data-imgsrc]');
  for (let ele of c) {
    // Yes, it does. Let's set placeholder image to those.
    ele.src = 'placeholder.svg';
  }
}

As there aren't any data-imgsrc attributes on the first page, the function doesn't do anything; nothing happens.

However, if the page content has been bought, paidWithCooin() is called and the page gets more content.

async function paidWithCooin() {
  // Hide_to_bottom-class fades the text, remove it.
  let c = document.getElementsByClassName("sm-hide_to_bottom");
  for (let ele of c)
    ele.classList.remove("sm-hide_to_bottom");

  // ShowMoorXID provides a unique SHA256 hash for the page.
  // Let's use that as a folder name.
  let folder = ShowMoorXID;

  // Does this page have sm_content that needs to be fetched?
  c = document.getElementById('sm_content');
  if (c !== null) { 
    // Yes, it does. Let's fetch it.
    let response = await fetch(folder + '/sm_content.html');
    let text = await response.text();

    // This replaces __SMXID__ with folder to set the correct path
    // for images and other resources on the sm_content.html
    text = text.replace("__SMXID__", folder);

    document.getElementById('sm_content').innerHTML = text;
  }

  // Does this page have images that need to be loaded?
  c = document.querySelectorAll('[data-imgsrc]');
  for (let ele of c) {
    // Yes, it does. Let's load those.
    let img_name = ele.getAttribute('data-imgsrc');
    let img_src = folder + '/' + img_name;
    ele.src = img_src;
  }
}

The paidWithCooin() function fetches additional HTML content and inserts it to the sm_content element. It also removes fade effect from the text.

The sm_content.html requires some manipulation to get its paths correctly. The __SMXID__ has to be replaced with folder value.

<!-- sm_content.html -->
<div>
  <img src="__SMXID__/mars_1.jpg">
  <p>The various sources of CO2 on Mars...</p>
</div>

Next... Let's see how the SM Code manipulates the second page.

<!-- second page -- dmsha2.html -->
<div>
  <h2>WOULD YOU LIVE LIKE THIS?</h2>
  <div>
    <img src="mars_3b.jpg">
    <p>Beware! The daily sandstorm is coming.</p>
  </div>
  <div>
    <img data-imgsrc="mars_3f.jpg">
    <p>Luckily, your habitat is inside a crater that protects you.</p>
  </div>
</div>
<script src="dmsha.js"></script>

In this case, there are elements with a data-imgsrc attribute. So, the notPaidWithCooin() applies a placeholder image to those.

And the paidWithCooin() sets correct paths to the data-imgsrc elements, causing images to be loaded.


Questions/comments/rants/raves... Let us know! Click the contact link below.