How to Add a Production Toggle that triggers an OptinMonster Popup

In this guide I will walk through the process

To start, we must create a product toggle using a radio input. My example looks like this:

<div id="versionselector" class="printed-selected">
  <div>
    <input type="radio" id="printed" name="book-type" value="printed" onclick="document.querySelector('#versionselector').classList.remove('ebook-selected'); document.querySelector('#versionselector').classList.add('printed-selected');" checked>
    <label for="printed">Printed book</label>
    <input type="radio" id="ebook" name="book-type" value="ebook" onclick="document.querySelector('#versionselector').classList.remove('printed-selected'); document.querySelector('#versionselector').classList.add('ebook-selected');">
    <label for="ebook">E-book</label>
  </div>
  <a href="https://app.monstercampaigns.com/c/cxgtlilx0k3zxlqpghzp/" class="btn button red buy-button buy-ebook-button" style="margin-left:0px; margin-top:20px;">Add to cart</a>
  <a href="https://app.monstercampaigns.com/c/ewibfl4qguumtac9xwfe/" class="btn button red buy-button buy-printed-button" style="margin-left:0px; margin-top:20px;">Add to cart</a>
</div>

Next we need to add the CSS. You may want to adjust the CSS to fit your own needs.

.buy-button {
      display: none;
}
.ebook-selected .buy-ebook-button {
      display: inline-block;
}
.printed-selected .buy-printed-button {
      display: inline-block;
}
input[type="radio"] {
      display: none;
}
label {
    background-color: #ffffff;
    padding: 8px 20px;
    border-radius: 0px;
    cursor: pointer;
    border: 1px solid #eaeaea !important;
    color: #767474 !important;
    font-weight: 600;
    font-size:13px;
    margin-top: 10px;
}
input[type="radio"]:checked + label {
    background-color: #f2f0f0;
    color: #333333 !important;
    font-weight: normal;
    border: 1px solid #74c8d8 !important;
    border-radius: 0px;
}

button.buy-button {
    -webkit-box-shadow: 0 0 13px -4px rgb(0 0 0 / 31%);
    -moz-box-shadow: 0 0 13px -4px rgb(0,0,0,.31);
    box-shadow: 0 0 13px -4px rgb(0 0 0 / 31%);
    border: none;
    padding: 8px 25px;
    margin-top: 25px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 35px;
    background: #e54d43;
    color: #ffffff;
    border-radius: 28px;
    text-transform: uppercase;
}

You may decide to make this different than what I have created.