[other] ENGMT-1983: add copy button and pretty print json

README.md

@@ -24,6 +24,9 @@ for full details.
 - [Web Full Reference]
 
 # Running locally
+Download node 18 (if not using nix)
+
 ```sh
 node startDev.js
+# Navigate to http://localhost:3000/dev.html
 ```

examples/example.template.html

@@ -8,10 +8,6 @@
 	<title>Branch Metrics Web SDK Example App</title>
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 	<style type="text/css">
-		.btn {
-			margin-top: 5px;
-		}
-
 		body {
 			font-family: Arial, sans-serif;
 			background-color: #f4f4f9;
@@ -163,6 +159,15 @@
 			});
 		}
 
+		function copySessionInfo() {
+			const pre = document.getElementById('session-info');
+			const text = pre.textContent;
+			navigator.clipboard.writeText(text).then(() => {
+				console.log('Copied');
+			}).catch(err => {
+				console.error('Failed to copy text: ', err);
+			});
+		}
 	</script>
 </head>
 
@@ -173,12 +178,14 @@ <h2>Branch Metrics Web SDK Example</h2>
 		</div>
 		<section>
 			<div class="row col-lg-8 col-lg-offset-2">
-				<h4>Session Info</h4>
+				<h4>Session Info
+					<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
+						Copy
+					</button>
+				</h4>
 				<pre id="session-info">Reading session from .init()...</pre>
-				<br>
 				<h4>Request</h4>
 				<pre id="request">Click a button!</pre>
-				<br>
 				<h4>Response</h4>
 				<pre id="response">Click a button!</pre>
 			</div>
@@ -252,7 +259,7 @@ <h3>Api Settings</h3>
 		// Take the Branch key from a meta tag
 		branch.init(getBranchKey(), function(err, data) {
 			// Avoid XSS by HTML escaping the data for display
-			$('#session-info').text(JSON.stringify(data));
+			$('#session-info').text(JSON.stringify(data, null, 2));
 			if (err) {
 				let alertMessage = err.message;
 				if (getApiUrlLocal().includes('stage')) {