GITBOOK-176: Added WordPress page. Added Demo to HTML and NEXT.JS pages.

adnanqaops · gitbook-bot · commit ee0235fe3ae8 · 2024-08-15T07:55:50.000Z
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -118,6 +118,7 @@
 * [Publish an App](publish-apps/publish-an-app.md)
 * [Embedd an App](publish-apps/embedd-an-app/README.md)
   * [Embed App in HTML Pages](publish-apps/embedd-an-app/embed-app-in-html-pages.md)
+  * [Embed App in WordPress Pages](publish-apps/embedd-an-app/embed-app-in-wordpress-pages.md)
   * [Embed Apps in React](publish-apps/embedd-an-app/embed-apps-in-react.md)
   * [Embed Apps in NEXT.JS](publish-apps/embedd-an-app/embed-apps-in-next.js.md)
   * [Native embed SDK](publish-apps/embedd-an-app/native-embed-sdk/README.md)
diff --git a/docs/publish-apps/embedd-an-app/embed-app-in-html-pages.md b/docs/publish-apps/embedd-an-app/embed-app-in-html-pages.md
@@ -11,15 +11,6 @@ Place the standard JavaScript Files in your \<HEAD> part of the HTML page.
 
 And now the Lowcoder SDK Scripts, as the last tags before the \</BODY> closing tag.
 
-```
-<script src="https://sdk.lowcoder.cloud/bundle.js"></script>
-<script type="module" src="https://unpkg.com/lowcoder-comps@latest/index.js"></script>
-```
-
-{% hint style="warning" %}
-From version 2.4 on, you would only need to include the standard bundle file.
-{% endhint %}
-
 ```
 <script src="https://sdk.lowcoder.cloud/bundle.js"></script>
 ```
@@ -43,3 +34,7 @@ Now you can place a small HTML snippet at the place where your App should be emb
 ```
 
 You can embed in this way multiple apps on an HTML page.
+
+The result of the above code in an HTML page is shown below in the Demo. The List component with Yellow background is the Lowcoder App :&#x20;
+
+{% embed url="https://www.loom.com/share/ad204fdbce674882a4c993d53c93b4a1?sid=4a2b982d-e915-4f63-9bd5-7b22c455c702" %}
diff --git a/docs/publish-apps/embedd-an-app/embed-app-in-wordpress-pages.md b/docs/publish-apps/embedd-an-app/embed-app-in-wordpress-pages.md
@@ -0,0 +1,40 @@
+# Embed App in WordPress Pages
+
+It is also possible to embed Lowcoder Apps on any WordPress Page with simple Scripts, that we provide on sdk.lowcoder.cloud. This enables you to embed Lowcoder Apps even without deep knowledge of React or Web Development.
+
+Place the standard JavaScript Files in your \<HEAD> part of the WordPress page.
+
+```
+<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
+```
+
+And now the Lowcoder SDK Scripts, as the last tags before the \</BODY> closing tag.
+
+```
+<script src="https://sdk.lowcoder.cloud/bundle.js"></script>
+```
+
+Now you can place a small HTML snippet at the place where your App should be embedded:
+
+```
+<div class="lowcoder-module-container">
+    <div id="lowcoder-embedding">
+      <div class="lowcoder-module-display"></div>
+      <input type="hidden" class="locoder-backend-url" value="https://api-service.lowcoder.cloud" />
+      <script>
+          var app_id_information = document.createElement("input");
+          app_id_information.setAttribute("type", "hidden");
+          app_id_information.setAttribute("class", "module-id");
+          app_id_information.setAttribute("value", "66ab6af10390b00771b2e649");
+          document.getElementById('lowcoder-embedding').appendChild(app_id_information);  
+      </script>
+    </div>
+</div>
+```
+
+You can embed in this way multiple apps on a WordPress page.
+
+We have created a WordPress Website and added two Lowcoder components. The 1st component is a sign up modal, and the 2nd component is an App. You may visit this site, below.
+
+{% embed url="http://demo-lowcoder.42web.io/" %}
diff --git a/docs/publish-apps/embedd-an-app/embed-apps-in-next.js.md b/docs/publish-apps/embedd-an-app/embed-apps-in-next.js.md
@@ -32,7 +32,6 @@ import "lowcoder-sdk/dist/style.css";
 
 * Create Wrapper Component to Embed Lowcoder Apps
 
-````
 ```
 "use client"
 import { LowcoderAppView } from "lowcoder-sdk";
@@ -57,33 +56,27 @@ function LowcoderAppWrapper(props) {
 
 export default LowcoderAppWrapper;
 ```
-````
 
 * Dynamically import the LowcoderAppWrapper component in the file where you want to embed the Lowcoder app
 
-````
 ```
 const LowcoderAppWrapper = dynamic(
   () => import('../components/LowcoderAppWrapper'), {ssr: false}
 );
 ```
-````
 
 * Now, we can embed  our Lowcoder app by just passing the appId to the imported LowcoderAppWrapper component.
 
-````
 ```
 <LowcoderAppWrapper
    appId='66ab6af10390b00771b2e649'
 />
 ```
-````
 
 ### Embed Lowcoder Modules
 
 * Create Wrapper Component to Embed Lowcoder Modules
 
-````
 ```
 "use client"
 import { useRef } from "react";
@@ -120,27 +113,28 @@ function LowcoderModuleWrapper(props) {
 
 export default LowcoderModuleWrapper;
 ```
-````
 
 * Dynamically import the LowcoderModuleWrapper component in the file where you want to embed the Lowcoder Module
 
-````
 ```
 const LowcoderModuleWrapper = dynamic(
   () => import('../components/LowcoderModuleWrapper'), {ssr: false}
 );
 ```
-````
 
 * Now, we can embed  our Lowcoder module by just passing the appId to the imported LowcoderModuleWrapper component.
 
-````
 ```
 <LowcoderModuleWrapper
    appId="660f13367c18a91b174fe96d"
 />
 ```
-````
+
+### Demo
+
+The result of the above code in NEXT.JS App is shown below in the Demo. The List component with Yellow background is the Lowcoder App and the Table component is the Lowcoder Module :&#x20;
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzi68y2h1jaw9x776x7lwz8p" %}
 
 ### Properties
 
