Embedding a Meshery Design in a WordPress Post
Introduction
In this tutorial, we will learn how to embed a Meshery Design in a WordPress post using the Embed option in Kanvas.
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.
-
Expand the Designs menu on the left.
-
Click the Quick actions button to the left of the design (inverted ellipsis) and select Export Design.
-
Click the download icon next to Embed Design from the list.
-
This will show the
js
file to download and the HTML code snipped to copy. -
Now, head over to WordPress and begin by uploading the
js
file to it. Ideally you will upload it to Media. -
Next, click on the uploaded file in WordPress and copy the File URL. You will need this later.
-
Open the WordPress post where you want to embed the design in edit mode and add a Custom HTML block.
- 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>
-
Click Preview to validate that the design is rendered.
- Publish the WordPress post and share.
Suggested Reading
- Deploy AWS EC2 Instances with Meshery - Learn how to deploy and manage AWS EC2 instances through Kubernetes with Meshery, utilizing AWS Controllers for Kubernetes (ACK) to enhance cloud resource management
- Deploying Apache Cassandra with a StatefulSet in Meshery Playground - Deploy Apache Cassandra with a StatefulSet using Meshery Playground in an interactive live cluster environment.
- Deploying PHP Guestbook application with Redis in Meshery - In this tutorial, we will deploy guest book built with PHP and Redis in Kubernetes. We will make use of Meshery Playground in an interactive live cluster environment.
- Exploring Kubernetes CronJobs - In this tutorial, we will explore how to use Meshery Playground, an interactive live cluster environment, to perform hands-on labs for managing Kubernetes CronJobs.
- Understanding Kubernetes ConfigMaps and Secrets with Meshery - In this tutorial, we will explore how to effectively use Kubernetes ConfigMaps and Secrets for managing configuration data and sensitive information. Leveraging Meshery Playground, an interactive live cluster environment, we'll perform hands-on labs to understand the practical aspects of working with ConfigMaps and Secrets in Kubernetes.
- Exploring Kubernetes Deployments with Meshery - Explore a Kubernetes Deployment using Meshery Playground, an interactive live environment, through a series of hands-on exercises.
- Exploring Kubernetes Pods with Meshery - Explore Kubernetes Pods using Meshery in an interactive live cluster environment, through a series of hands-on exercises.
- Publishing Meshery Designs to ArtifactHub - Step by step example for how to export Meshery Designs and publish them to an ArtifactHub repository.
- Deploying WordPress and MySQL with Persistent Volumes with Meshery - Deploy a WordPress site and a MySQL database with Persistent Volumes using Meshery Playground in an interactive live cluster environment.