Print Button

Print this Guideline

Create a button to function as "Ctrl + P".

Requirement:

  • Premium Plan

  • Turn on Dev Mode

Add JavaScript
  1. Access to Dashboard -> Setting -> Tracking & Analytics

  2. Click New Tool -> Custom

  3. Copy below code inside the Paste the code snippet here

  4. Follow the setting as the image shown

<script>
window.onmessage = event => {
if (event.data == "print"){
            window.print() 
}        
    }
</script>

1.JPG
Add a Print Button
  1. Access the Editor, select Dev Mode, click Corvid to Trun on Dev Mode

  2. Add a Button, right-click the button element -> Properties

  3. Name the ID to printButton (Optional)

  4. Click + next to onClick

  5. A function code will be added under the Page Code area at the bottom

  6. Insert below code inside the function (There will an error highlighting the #html, it will be fixed in next step.

2.JPG

$w('#html1').postMessage("print");

Add HTML iframe
  1. Add iframe from Add -> More -> Embeds

  2. Right-click the iframe, click Properties

  3. name the iframe to html1

  4. Copy the below code, paste inside the iframe

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>


  </head>

  <body onload="init();">

<script type="text/javascript">
function init () {// when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {    window.parent.postMessage(event.data, "*");
    }
  }
}
function insertMessage(msg) {
  window.parent.postMessage(msg, "*");
}


</script>
  </body>
</html>
 

3.JPG