quickstart.rst 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. Option 1: Use the content delivery network
  9. ------------------------------------------
  10. Converse has a `CDN <https://en.wikipedia.org/wiki/Content_delivery_network>`_, provided by `KeyCDN <http://keycdn.com/>`_,
  11. which hosts its JavaScript and CSS files.
  12. The latest versions of these files are available at these URLs:
  13. * https://cdn.conversejs.org/dist/converse.min.js
  14. * https://cdn.conversejs.org/css/converse.min.css
  15. If you are integrating Converse into an existing website or app, then we recommend
  16. that you load a specific version of Converse. Otherwise your website or app
  17. might break when a new backwards-incompatible version of Converse is released.
  18. To load a specific version of Converse you can put the version in the URL:
  19. * https://cdn.conversejs.org/4.1.2/dist/converse.min.js
  20. * https://cdn.conversejs.org/4.1.2/css/converse.min.css
  21. You can include these two URLs inside the *<head>* element of your website
  22. via the *script* and *link* tags:
  23. .. code-block:: html
  24. <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/4.1.2/css/converse.min.css">
  25. <script src="https://cdn.conversejs.org/4.1.2/dist/converse.min.js" charset="utf-8"></script>
  26. Option 2: Building the files yourself
  27. -------------------------------------
  28. Instead of using the CDN, you can also create your own builds and host them yourself.
  29. Have a look at the :ref:`creating_builds` section on how to create your own builds.
  30. In short, you should be able to do it by running ``make dist`` inside a
  31. checkout of the `Converse repo <http://github.com/conversejs/converse.js/>`_.
  32. Besides including the ``converse.min.js`` and ``converse.min.css`` files,
  33. you'll also need to make sure that the ``webfonts`` directory is available in
  34. the same location as ``converse.min.css``.
  35. Initializing Converse
  36. ---------------------
  37. You'll need to initialize Converse with configuration settings relevant to your requirements.
  38. Take a look at the :ref:`configuration-settings` section for info on all the available settings.
  39. To quickly get started, you can put the following JavaScript code at the
  40. bottom of your page (after the closing *</body>* element)::
  41. <script>
  42. converse.initialize({
  43. bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
  44. show_controlbox_by_default: true
  45. });
  46. </script>
  47. The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
  48. Converse repository serves as a nice, usable example.
  49. Fullscreen version
  50. ------------------
  51. Converse also comes in a fullscreen version.
  52. A hosted version is available online at `conversejs.org/fullscreen <https://conversejs.org/fullscreen.html>`_.
  53. Originally this version was available as a separate build file, but
  54. as of version 4.0.0 and higher, the difference between the "overlay" and the
  55. "fullscreen" versions of converse.js is simply a matter of configuring the
  56. :ref:`view_mode`.
  57. For example::
  58. <script>
  59. converse.initialize({
  60. bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
  61. view_mode: 'fullscreen'
  62. });
  63. </script>
  64. Where to go from here?
  65. ======================
  66. Have a look at the various :ref:`features <features>` that Converse provides, for some of
  67. them you might have to do more setup work, like configuring an XMPP server or
  68. webserver.
  69. You might want to implement some kind of persistent single-session solution for
  70. your website, where users authenticate once in your website and are then
  71. automatically logged in to the XMPP server as well. For more info on how this
  72. can be achieved, read: :ref:`session-support`.
  73. For end-to-end encryption via OMEMO, you'll need to load `libsignal-protocol.js
  74. <https://github.com/signalapp/libsignal-protocol-javascript>`_ separately in
  75. your page. Take a look at the section on :ref:`libsignal <dependency-libsignal>` and the
  76. :ref:`security considerations around OMEMO <feature-omemo>`.
  77. Perhaps you want to create your own custom build of Converse? Then head over
  78. to the :doc:`builds` section, or more generally the :doc:`development <development>`
  79. documentation.
  80. Do you want to know how to theme Converse? Then read the :doc:`theming <theming>`
  81. documentation.