Embedding Vaadin to a web page


I followed: http://vaadin.com/book/-/page/application.embedding.html. to try to embed a vaddin widget into my web page. Here is all I have done and stuck:

I created a default Vaadin project using eclipse plugin. Then in the war folder i create a file index.html

Now, I want to use iFrame approach and want to embed the default hello Vaadin user widget to this page. Doc tell to look at the page source of the vaadin widget and use the info to provide as src in iframe. But I am confused like what exactly to look for. Below is my source of vaadin widget. Please advise.

html, body {height:100%;}Myproject Application
You have to enable javascript in your browser to use an application built with Vaadin.

Oops. I forwarded you to a really old piece of documentation, sorry.

Basically there are two options:

  1. IFrame. No Vaadin specific things needed - just add an iframe with src attribute pointing to vaadin app. See

  2. Use Div to run Vaadin application and run it inside the same “page”. Here is a thread with up-to-date info:
    . Basically you must just cut-n-paste vaadin init code from multiapp.html example.

ok yes i m using iframe method but the problem is i dont know what exactly to put in src?

In a way I am facing difficulty in knowing where to look for the vaadin app?

Till now i created a default vaadin project and when i run it i see hello vaddin user with a button.

So when i did a view source i posted the entire thing i see.

Now what should i specify in the src

Just put the URL of your application (you are using to view the hello world application).

There is a brand new official but free add-on for embedding Vaadin apps:

It’s super easy, does not require any client side coding, and works over site boundaries too.

Is the “old”

style embedding still supposed to work and supported,
or should we now always use the addon ?

Also the

style should still work.

You need the add-on if the site on which you are embedding the application is different from the site serving the application - and note that browser security mechanisms (and the specification) also consider e.g. http and https on the same server as different sites.


we know of the cross domain problem.

But we use it to “vaadinize” our web 1.0 style webinterface step by step :slight_smile:
And this is all comming from the very same server/url, so that is no problem.