diff --git a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
index f1544a55ac0f2f668a7473ee912f70eae415a294..7ff4fb2e8d12dca0beee2a0dc0eb54b50a033c4c 100644
--- a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
+++ b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
@@ -37,11 +37,11 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement {
                 </div>
                 <div class="content">
                     <h2 class="subtitle">Deutsch</h2>
-                    <vpu-knowledge-base-web-page-element-view lang="de" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
+                    <vpu-knowledge-base-web-page-element-view api-url="${utils.getAPiUrl()}" lang="de" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
                 </div>
                 <div class="content">
                     <h2 class="subtitle">Englisch</h2>
-                    <vpu-knowledge-base-web-page-element-view lang="en" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
+                    <vpu-knowledge-base-web-page-element-view api-url="${utils.getAPiUrl()}" lang="en" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
                 </div>
             </section>
         `;
diff --git a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
index 7f4bccc13bd00eca2ec0333028ce951eeb5dbbb9..1c3b3fb644a21f6faaaff3e42ce93a77e0411f3a 100644
--- a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
+++ b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
@@ -15,6 +15,7 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
         this.lang = 'de';
         this.value = '';
         this.html = '';
+        this.apiUrl = utils.getAPiUrl();
     }
 
     /**
@@ -25,6 +26,7 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
             lang: { type: String },
             value: { type: String },
             html: { type: String, attribute: false },
+            apiUrl: { type: String, attribute: 'api-url' },
         };
     }
 
@@ -33,12 +35,13 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
         i18n.changeLanguage(this.lang);
         const that = this;
 
-        // JSONLD.initialize(utils.getAPiUrl(), function (jsonld) {
-        //     const apiUrl = jsonld.getApiUrlForEntityName("KnowledgeBaseWebPageElement") + '/' + btoa(that.value);
+        // JSONLD.initialize(this.apiUrl, function (jsonld) {
+        //     const apiUrl = jsonld.getApiUrlForEntityName("KnowledgeBaseWebPageElement") + '/' +
+        //         encodeURIComponent(commonUtils.base64EncodeUnicode(encodeURIComponent(that.value)));
         // });
 
         // sadly there there is no entity url without "collectionOperations" in entity KnowledgeBaseWebPageElement!
-        const apiUrl = utils.getAPiUrl("/web_page_elements/knowledge_base_web_page_elements/") +
+        const apiUrl = this.apiUrl + "/web_page_elements/knowledge_base_web_page_elements/" +
             encodeURIComponent(commonUtils.base64EncodeUnicode(encodeURIComponent(that.value))) +
             "?lang=" + encodeURIComponent(that.lang);