diff --git a/elements/html-template-base/assets/css/view_enqueue.css b/elements/html-template-base/assets/css/view_enqueue.css
new file mode 100644
index 0000000..d4ce17f
--- /dev/null
+++ b/elements/html-template-base/assets/css/view_enqueue.css
@@ -0,0 +1,30 @@
+/**
+ * Loaded via the "view_enqueue_css" wpb_map parameter.
+ *
+ * Unlike "admin_enqueue_css" / "front_enqueue_css" (editors only), this file is
+ * enqueued on the actual published page whenever the [test_element] shortcode is
+ * present in the content, so it is the right place for the element's real,
+ * visitor-facing styles.
+ *
+ * The [test_element] template (templates/test_element.php) prints the entered
+ * content inside ".your_content_from_textarea_html", so that is what we style
+ * here to prove the file is applied on the front end.
+ */
+.your_content_from_textarea_html {
+	margin-top: 16px;
+	padding: 16px 20px;
+	border-left: 4px solid #9fcb61;
+	border-radius: 4px;
+	background: #f6f8f2;
+	font-size: 15px;
+	line-height: 1.6;
+	color: #333333;
+}
+
+.your_content_from_textarea_html > *:first-child {
+	margin-top: 0;
+}
+
+.your_content_from_textarea_html > *:last-child {
+	margin-bottom: 0;
+}
diff --git a/elements/html-template-base/assets/js/view_enqueue.js b/elements/html-template-base/assets/js/view_enqueue.js
new file mode 100644
index 0000000..d4e4d2d
--- /dev/null
+++ b/elements/html-template-base/assets/js/view_enqueue.js
@@ -0,0 +1,48 @@
+/**
+ * Loaded via the "view_enqueue_js" wpb_map parameter.
+ *
+ * Unlike "admin_enqueue_js" / "front_enqueue_js" (which only run inside the
+ * WPBakery backend/frontend editors), this file is enqueued on the actual
+ * published page whenever the [test_element] shortcode is present, so it is the
+ * place for the element's real, visitor-facing behaviour.
+ */
+( function () {
+	'use strict';
+
+	console && console.log( 'view_enqueue.js is loaded on the site frontend' );
+
+	/**
+	 * Animate every chart value from 0 up to its target number once it scrolls
+	 * into view.
+	 */
+	function initTestElements() {
+		var charts = document.querySelectorAll( '.test-element-chart__value' );
+
+		if ( ! charts.length ) {
+			return;
+		}
+
+		charts.forEach( function ( el ) {
+			var target = parseInt( el.getAttribute( 'data-value' ) || el.textContent, 10 ) || 0;
+			var current = 0;
+			var step = Math.max( 1, Math.round( target / 40 ) );
+
+			var timer = setInterval( function () {
+				current += step;
+
+				if ( current >= target ) {
+					current = target;
+					clearInterval( timer );
+				}
+
+				el.textContent = current + '%';
+			}, 20 );
+		} );
+	}
+
+	if ( 'loading' === document.readyState ) {
+		document.addEventListener( 'DOMContentLoaded', initTestElements );
+	} else {
+		initTestElements();
+	}
+} )();
diff --git a/elements/html-template-base/index.php b/elements/html-template-base/index.php
index 9abea89..5bd3e5e 100644
--- a/elements/html-template-base/index.php
+++ b/elements/html-template-base/index.php
@@ -36,15 +36,18 @@
 		// WPBakery will look for shortcode template in "wp-content/themes/your_theme/wpb_templates/test_element.php" automatically.
 		// In this example we are extending WPBakery from plugin, so we rewrite template.
 		'html_template'           => __DIR__ . '/templates/test_element.php',
-		// This will load extra js file in backend (when you edit page with WPBakery).
-		// use preg replace to be sure that "space" will not break logic.
-		'admin_enqueue_js'        => preg_replace( '/\s/', '%20', plugins_url( 'assets/js/admin_enqueue.js', __FILE__ ) ),
-		// This will load extra css file in backend (when you edit page with WPBakery).
-		'admin_enqueue_css'       => preg_replace( '/\s/', '%20', plugins_url( 'assets/css/admin_enqueue.css', __FILE__ ) ),
+		// This will load extra js file in backend editor (when you edit page with WPBakery).
+		'admin_enqueue_js'        => esc_url( plugins_url( 'assets/js/admin_enqueue.js', __FILE__ ) ),
+		// This will load extra css file in backend editor (when you edit page with WPBakery).
+		'admin_enqueue_css'       => esc_url( plugins_url( 'assets/css/admin_enqueue.css', __FILE__ ) ),
 		// This will load extra js file in frontend editor (when you edit page with WPBakery).
-		'front_enqueue_js'        => preg_replace( '/\s/', '%20', plugins_url( 'assets/js/front_enqueue.js', __FILE__ ) ),
+		'front_enqueue_js'        => esc_url( plugins_url( 'assets/js/front_enqueue.js', __FILE__ ) ),
 		// This will load extra css file in frontend editor (when you edit page with WPBakery).
-		'front_enqueue_css'       => preg_replace( '/\s/', '%20', plugins_url( 'assets/css/front_enqueue.css', __FILE__ ) ),
+		'front_enqueue_css'       => esc_url( plugins_url( 'assets/css/front_enqueue.css', __FILE__ ) ),
+		// This will load extra js file on the actual published page whenever the [test_element] shortcode is present.
+		'view_enqueue_js'         => esc_url( plugins_url( 'assets/js/view_enqueue.js', __FILE__ ) ),
+		// This will load extra css file on the actual published page whenever the [test_element] shortcode is present.
+		'view_enqueue_css'        => esc_url( plugins_url( 'assets/css/view_enqueue.css', __FILE__ ) ),
 		// JS View name for backend editor. Can be used to override or add some logic for shortcodes in backend (cloning/rendering/deleting/editing).
 		'js_view'                 => 'ViewTestElement',