AMP

AMP is a web component framework that you can use to easily create user-first websites, stories, emails, and ads. Learn more here.

Many publishers create AMP pages to be better positioned by Google and get more traffic. The issue with AMP is how to monazite effectively. You cannot simply run JavaScript in AMP pages, so most paywall don’t work for AMP.

The solution we suggest is a static wall. This wall will only contain a redirection button to the non-AMP page, where the dynamic SmartWall can work properly. In order for this to work, publishers need two versions of the article page, the AMP version and the non-AMP version. More about this here.

AMP page

To start, you'll need to create a AMP version of your article's page. How to do it can be found here.

Then, you can cut the content of the article to your liking, just showing a preview of the article.

Last, you can insert, after the article preview, this HTML code to add the static wall. Make sure you change the URL of the redirection link to the URL of the normal version of the article's page.

<div class="sw-amp">
  <div class="sw-gradient"></div>
  <div class="sw-amp-wall">
    <a href="https://insert-here-your-non-AMP-article-url.com">
      <button class="sw-amp-btn">Continue reading</button>
    </a>
  </div>
</div>

You can also add styles to this wall adding this CSS code to your <style amp-custom> tag

<style>
  .sw-amp {
    position: relative;
  }
  .sw-amp-wall {
    width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  .sw-amp-btn {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    background: rgba(51, 51, 51, 1);
    cursor: pointer;
    padding: 15px 10px;
    border-radius: 4px;
    box-shadow: none;
    border: none;
    overflow: hidden;
  }
  .sw-amp-btn:hover,
  .sw-amp-btn:focus {
    outline: none;
    background: rgba(51, 51, 51, 0.9);
  }
  .sw-gradient {
    width: 100%;
    height: 120px;
    transform: translateY(-120px);
    position: absolute;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 0,
      #fff 100%
    );
  }
</style>