quickstart.rst 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. .. raw:: html
  2. <div id="banner"><a href="https://github.com/jcbrand/converse.js/blob/master/docs/source/quickstart.rst">Edit me on GitHub</a></div>
  3. ==========
  4. Quickstart
  5. ==========
  6. Getting a demo up and running
  7. =============================
  8. You can try out the latest version of Converse at `conversejs.org <https://conversejs.org>`_
  9. for the overlayed version and `conversejs.org/fullscreen.html <https://conversejs.org/fullscreen.html>`_
  10. for the full page version.
  11. If you want to host and serve Converse yourself, there are a few options available.
  12. Let your XMPP server serve Converse for you
  13. -------------------------------------------
  14. If you run your own XMPP server, you might first want to check whether it has
  15. a plugin or module for hosting Converse.
  16. * `Openfire <http://www.igniterealtime.org/projects/openfire/>`_ has the `inverse <https://www.igniterealtime.org/projects/openfire/plugin-archive.jsp?plugin=inverse>`_ plugin.
  17. * `Prosody <https://prosody.im/>`_ has `mod_conversejs <https://modules.prosody.im/mod_conversejs.html>`_.
  18. * `ejabberd <http://www.ejabberd.im/>`_ has `mod_conversejs <https://docs.ejabberd.im/admin/configuration/modules/#mod-conversejs>`_.
  19. Serving Converse yourself
  20. -------------------------
  21. Alternative you can serve only Converse without requiring any particular XMPP server.
  22. To do so, you'll need to get the right files to host, for which you have four options.
  23. .. note::
  24. Pro-tip, if you just want to quickly test things locally, you can run ``make serve`` inside a checkout of the Converse repo.
  25. Converse is then hosted at http://localhost:8000
  26. Option 1: Use the content delivery network
  27. ******************************************
  28. Converse has a `CDN <https://en.wikipedia.org/wiki/Content_delivery_network>`_, provided by `KeyCDN <http://keycdn.com/>`_,
  29. which hosts its JavaScript and CSS files.
  30. The latest versions of these files are available at these URLs:
  31. * https://cdn.conversejs.org/dist/converse.min.js
  32. * https://cdn.conversejs.org/dist/converse.min.css
  33. If you are integrating Converse into an existing website or app, then we recommend
  34. that you load a specific version of Converse. Otherwise your website or app
  35. might break when a new backwards-incompatible version of Converse is released.
  36. To load a specific version of Converse you can put the version in the URL:
  37. * https://cdn.conversejs.org/10.1.5/dist/converse.min.js
  38. * https://cdn.conversejs.org/10.1.5/dist/converse.min.css
  39. You can include these two URLs inside the *<head>* element of your website
  40. via the *script* and *link* tags:
  41. .. code-block:: html
  42. <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/10.1.5/dist/converse.min.css">
  43. <script src="https://cdn.conversejs.org/10.1.5/dist/converse.min.js" charset="utf-8"></script>
  44. Option 2: Download the builds from Github
  45. *****************************************
  46. The `Converse releases page on Github <https://github.com/conversejs/converse.js/releases>`_
  47. has the release notes for every release as well as links to downloadable zip files
  48. containing all the files you need to host Converse yourself.
  49. Extract the ``.zip`` (or ``.tar.gz``) file and include the ``converse.min.js`` and ``converse.min.css``
  50. files (found in ``package/dist``) in the ``<head>`` element of your page, similar to what's shown in
  51. option 1 above.
  52. The other files in ``dist`` should also be hosted by your server and available.
  53. During operation Converse will make HTTP calls to dynamically fetch more files
  54. from the ``dist`` folder. The exceptions here are the ``.map`` files and the
  55. unminified ``converse.js`` and ``converse.css`` files.
  56. Option 3: Building the files yourself
  57. *************************************
  58. Instead of using the CDN, you can also create your own builds and host them yourself.
  59. Have a look at the :ref:`creating_builds` section on how to create your own builds.
  60. In short, you should be able to do it by running ``make dist`` inside a
  61. checkout of the `Converse repo <http://github.com/conversejs/converse.js/>`_.
  62. To build the files and also start an HTTP server, you can run ``make serve``.
  63. The distribution files will be added to the ``./dist`` folder inside the repo.
  64. Initializing Converse
  65. =====================
  66. You'll need to initialize Converse with configuration settings relevant to your requirements.
  67. Take a look at the :ref:`configuration-settings` section for info on all the available settings.
  68. To quickly get started, you can put the following JavaScript code at the
  69. bottom of your page (after the closing *</body>* element)::
  70. <script>
  71. converse.initialize({
  72. bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
  73. show_controlbox_by_default: true
  74. });
  75. </script>
  76. The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
  77. Converse repository serves as a nice, usable example.
  78. Fullscreen version
  79. ------------------
  80. Converse also comes in a fullscreen version.
  81. A hosted version is available online at `conversejs.org/fullscreen <https://conversejs.org/fullscreen.html>`_.
  82. Originally this version was available as a separate build file, but
  83. as of version 4.0.0 and higher, the difference between the "overlay" and the
  84. "fullscreen" versions of converse.js is simply a matter of configuring the
  85. :ref:`view_mode`.
  86. For example::
  87. <script>
  88. converse.initialize({
  89. bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
  90. view_mode: 'fullscreen'
  91. });
  92. </script>
  93. Where to go from here?
  94. ======================
  95. Have a look at the various :ref:`features <features>` that Converse provides, for some of
  96. them you might have to do more setup work, like configuring an XMPP server or
  97. webserver.
  98. You might want to implement some kind of persistent single-session solution for
  99. your website, where users authenticate once in your website and are then
  100. automatically logged in to the XMPP server as well. For more info on how this
  101. can be achieved, read: :ref:`session-support`.
  102. For end-to-end encryption via OMEMO, you'll need to load `libsignal-protocol.js
  103. <https://github.com/signalapp/libsignal-protocol-javascript>`_ separately in
  104. your page. Take a look at the section on :ref:`libsignal <dependency-libsignal>` and the
  105. :ref:`security considerations around OMEMO <feature-omemo>`.
  106. Perhaps you want to create your own custom build of Converse? Then head over
  107. to the :doc:`builds` section, or more generally the :doc:`development <development>`
  108. documentation.
  109. Do you want to know how to theme Converse? Then read the :doc:`theming <theming>`
  110. documentation.