layer5io · banana-three-join · May 14, 2026 · gemini-code-assist · May 16, 2026 · gemini-code-assist
diff --git a/...nt/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png b/...nt/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png
diff --git a/.../en/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png b/.../en/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-url.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-url.png
diff --git a/...nvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png b/...nvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png
diff --git a/...t/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png b/...t/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign.png
diff --git a/...kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png b/...kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png
diff --git a/...s/tutorials/images/embedding-design-in-wordpress/meshery-design-custom-html.png b/...s/tutorials/images/embedding-design-in-wordpress/meshery-design-custom-html.png
diff --git a/...vas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png b/...vas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png
diff --git a/...n/kanvas/tutorials/images/embedding-design-in-wordpress/upload-js-wordpress.png b/...n/kanvas/tutorials/images/embedding-design-in-wordpress/upload-js-wordpress.png
diff --git a/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md
@@ -15,74 +15,51 @@ In this tutorial, we will learn how to embed a **Meshery Design** in a WordPress
 
 This tutorial assumes that you have created a design or have an existing one. If not, you can use one of the numerous public designs available in **Kanvas** for this tutorial.
 
-1. Expand the **Designs** menu on the left.
+1. Expand the **Actions** menu on the left and select export.
 
    ![Expand Designs](/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png)
 
-2. Click the **Quick actions** button to the left of the design (inverted ellipsis) and select **Export Design**.
+2. Click the download icon next to **Embed Design**.
 
    ![Export Design](/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png)
 
-3. Click the download icon next to **Embed Design** from the list.
-
-   ![Embed Design](/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign.png)
-
-4. This will show the `js` file to download and the HTML code snipped to copy.
+3. This will show the `js` file to download and the HTML code snipped to copy.
-3. This will show the `js` file to download and the HTML code snipped to copy.
+3. This will show the js file to download and the HTML code snippet to copy.
-3. This will show the `js` file to download and the HTML code snipped to copy.
+3. This will show the js file to download and the HTML code snippet to copy.
 
    ![Embed Design](/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png)
 
-5. Now, head over to WordPress and begin by uploading the `js` file to it. Ideally you will upload it to Media.
-
-   ![Upload to WordPress](/kanvas/tutorials/images/embedding-design-in-wordpress/upload-js-wordpress.png)
+4. Now, create a `js` folder in the path of your current wordpress theme
-4. Now, create a `js` folder in the path of your current wordpress theme
+4. Now, create a js folder in the path of your current WordPress theme
-4. Now, create a `js` folder in the path of your current wordpress theme
+4. Now, create a js folder in the path of your current WordPress theme
 
-6. Next, click on the uploaded file in WordPress and copy the File URL. You will need this later.
+5. Next, copy the downloaded `js` file into this folder.
 
-   ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-url.png)
+   ![Copy JS](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png)
+
+6. To the following script, replace `design_file_name.js` with the name of the `js` file which you just downloaded. Once this is done,  go to the `functions.php` file in your current Wordpress theme and copy script.
-6. To the following script, replace `design_file_name.js` with the name of the `js` file which you just downloaded. Once this is done,  go to the `functions.php` file in your current Wordpress theme and copy script.
+6. To the following script, replace design_file_name.js with the name of the js file which you just downloaded. Once this is done, go to the functions.php file in your current WordPress theme and copy the script.
-6. To the following script, replace `design_file_name.js` with the name of the `js` file which you just downloaded. Once this is done,  go to the `functions.php` file in your current Wordpress theme and copy script.
+6. To the following script, replace design_file_name.js with the name of the js file which you just downloaded. Once this is done, go to the functions.php file in your current WordPress theme and copy the script.
+
+```
+function kanvas_design_script() {
+        $script_uri = get_template_directory_uri() . design_file_name.js';
-        $script_uri = get_template_directory_uri() . design_file_name.js';
+        $script_uri = get_template_directory_uri() . '/js/design_file_name.js';
-        $script_uri = get_template_directory_uri() . design_file_name.js';
+        $script_uri = get_template_directory_uri() . '/js/design_file_name.js';
+        wp_enqueue_script_module(
+                        'kanvas-design', 
+                        $script_uri, 
+                        array(), 
+                        '1.1.0', 
+            );
+}
+add_action('wp_enqueue_scripts', 'kanvas_design_script');
+```
+
+   ![Copy Script](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png)
 
 7. Open the WordPress post where you want to embed the design in edit mode and add a _Custom HTML_ block.
 
    ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png)
 
-8. Paste the following CSS code as it is, followed by the **Embed Code** copied from **Kanvas**. Update the script source value to the URL copied from WordPress.  
-   ```
-   <style>
-     .embed-design-container {
-       width: 100%;
-       border-radius: 1rem;
-       margin: 1rem;
-       overflow: hidden;
-       margin-inline: auto;
-       height: 35rem;
-     }
-     .embed-canvas-container {
-       background-color: gray;
-     }
-   </style>
-   ```
-    The final _Custom HTML_ should look something like this:
-    ```
-    <style>
-     .embed-design-container {
-       width: 100%;
-       border-radius: 1rem;
-       margin: 1rem;
-       overflow: hidden;
-       margin-inline: auto;
-       height: 35rem;
-     }
-     .embed-canvas-container {
-       background-color: gray;
-    }
-    </style>
-    <!-- Learn more at https://docs.layer5.io/meshmap/designer/export-designs/#exporting-as-embedding -->
-    <div id="embedded-design-a1376b51-d2c4-4ef8-8337-6dc2c24fa939"></div>
-    <script src="https://yourwordpressdomain/wp-content/uploads/2025/01/embedded-design-tutorial-exploring-kubernetes-pod.js" type="module" ></script>
-    ```
-   ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/meshery-design-custom-html.png)
+8. Paste the **Embed Code** copied from **Kanvas**. 
-8. Paste the **Embed Code** copied from **Kanvas**. 
+8. Paste the div element from the Embed Code copied from Kanvas.
-8. Paste the **Embed Code** copied from **Kanvas**. 
+8. Paste the div element from the Embed Code copied from Kanvas.
+
+   ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png)
 
 9. Click **Preview** to validate that the design is rendered.
 
    ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png)
 
-10. Publish the WordPress post and share.
-
+10. Publish the WordPress post and share.