Title: Embed Html5 App into wordpress
Last modified: February 23, 2021

---

# Embed Html5 App into wordpress

 *  [huronsen](https://wordpress.org/support/users/huronsen/)
 * (@huronsen)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/embed-html5-app-into-wordpress/)
 * Hi there!
 * I’m trying to embed an html/javascript application into my website.
    I do this
   my first time and bought an with a bit of description how to do it. I thought
   it’s easier but I don’t get it to work.
 * That’s the tutorial which comes with the app:
    [https://support.vebto.com/help-center/articles/10/13/50/getting-started](https://support.vebto.com/help-center/articles/10/13/50/getting-started)
 * What i did to embed it was creating a new plugin folder in FDP-Manager. And put
   all the Plugin-Files in it, like described.
    And made an .php file, in which 
   I defined a shortcode, so i can place the app wherever i want on my webpage. 
   Underneath i put the code, which they provide for embeding the plugin. My code
   ist:
 *     ```
       <script>
       <?php
       /**
       * Plugin Name: My_first_embed
       * Plugin URI: www.my_first_embed.doesntmatter
       * Description: My_first_embed
       * Version: 1.0
       * Author: Me
       * Author URI: 
       **/
       ?>
       add_shortcode( 'shortcode_name', function () {
   
       	$out = '<p>[editor]</p>';
   
       	return $out;
       } );
       add_action( 'wp_head', function () { ?>
   
       <html>
           <head>
               <link rel="stylesheet" href="pixie/styles.min.css">
           </head>
           <body>
               <pixie-editor></pixie-editor>
           ​
               <script src="pixie/scripts.min.js"></script>
           ​
               <script>
                   var pixie = new Pixie({
                       onLoad: function() {
                           console.log('Pixie is ready');
                       }
                   });
               </script>
           </body>
        </html>
       ```
   
 * First the plugin worked, but it was not loading, than i changed the code to, 
   because i thought that it should be enough… but id didn’t woked either:
 *     ```
       <pixie-editor></pixie-editor>
           ​
               <script src="pixie/scripts.min.js"></script>
           ​
               <script>
                   var pixie = new Pixie({
                       onLoad: function() {
                           console.log('Pixie is ready');
                       }
                   });
               </script>​
       ```
   
 * So any suggestions? 🙂
    i appreciate every contribution!
 * thank you
    cheers Huronsen
    -  This topic was modified 5 years, 3 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/embed-html5-app-into-wordpress/#post-14091916)
 * Remove the leading `<script>` from your PHP file.
    Remove the `?>` before `add_shortcode`.
   Remove the HTML that isn’t `<head>` related from the wp-head action function.
   Add the closing bracket for the wp-head function. `<?php }`
 *  Thread Starter [huronsen](https://wordpress.org/support/users/huronsen/)
 * (@huronsen)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/embed-html5-app-into-wordpress/#post-14092299)
 * Thank you!
 * I’m now stuck with this:
 *     ```
       function designer() {    
           ?>
           </html>
           <head>
               <link rel="stylesheet" href="pixie/styles.min.css">
           </head>
           <body>
               <pixie-editor></pixie-editor>
               <script src="pixie/scripts.min.js"></script>
           ​       <script>
                   var pixie = new Pixie({
                       onLoad: function() {
                           console.log('Pixie is ready');
                       }
                   });
               </script>
           </body>
           </html>
           <?php
       }
       function shortcodes_designer(){
        add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
       }
       add_action('editor', 'shortcodes_designer');
   
       ?>
       ```
   
 * now, i dont get an error, but just the shortcode is displaying and nothing works.
   
   i’m not shure if i have to open ports on the server for it to function?
 * Thank you!
    Cheers
    -  This reply was modified 5 years, 3 months ago by [huronsen](https://wordpress.org/support/users/huronsen/).
    -  This reply was modified 5 years, 3 months ago by [huronsen](https://wordpress.org/support/users/huronsen/).
 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/embed-html5-app-into-wordpress/#post-14092510)
 * Is that the entire contents of your file? I can’t follow what you are doing.
 * A shortcode goes in the content area of a page, so you can’t be putting all the`
   <html>` and `<head>` and `<body>` tags. Those are output by the theme.
 * Your new code seems to be targeting the editor, when before it seemed that you
   wanted a front end result.
    There is no action in WP called ‘editor’, so what
   are you trying to do? You don’t need to use `add_shortcode` on an action. It 
   can be called straight, like you had before. Perhaps you should do some reading
   at [https://developer.wordpress.org/](https://developer.wordpress.org/)
 *  [deanjansen1](https://wordpress.org/support/users/deanjansen1/)
 * (@deanjansen1)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/embed-html5-app-into-wordpress/#post-14099841)
 * scripts.min.js and styles.min.css doesn’t seem like your loading those two files
   correctly.
 * you will need to put those in your plugin folder and include them using the full
   url.
    Look below how to include the CSS and JS.
 * JS
    [https://developer.wordpress.org/reference/functions/wp_enqueue_script/](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
 * CSS
    [https://developer.wordpress.org/reference/functions/wp_enqueue_style/](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)
    -  This reply was modified 5 years, 3 months ago by [deanjansen1](https://wordpress.org/support/users/deanjansen1/).
    -  This reply was modified 5 years, 3 months ago by [deanjansen1](https://wordpress.org/support/users/deanjansen1/).
    -  This reply was modified 5 years, 3 months ago by [deanjansen1](https://wordpress.org/support/users/deanjansen1/).
    -  This reply was modified 5 years, 3 months ago by [deanjansen1](https://wordpress.org/support/users/deanjansen1/).

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Embed Html5 App into wordpress’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 4 replies
 * 3 participants
 * Last reply from: [deanjansen1](https://wordpress.org/support/users/deanjansen1/)
 * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/embed-html5-app-into-wordpress/#post-14099841)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
