quickstart.rst 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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. Use the content delivery network
  9. --------------------------------
  10. Converse.js 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. To load a specific version of Converse.js you can put the version in the URL, like so:
  16. * https://cdn.conversejs.org/3.3.4/dist/converse.min.js
  17. * https://cdn.conversejs.org/3.3.4/css/converse.min.css
  18. You can include these two URLs inside the *<head>* element of your website
  19. via the *script* and *link* tags:
  20. .. code-block:: html
  21. <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/css/converse.min.css">
  22. <script src="https://cdn.conversejs.org/dist/converse.min.js" charset="utf-8"></script>
  23. .. note:: Instead of always loading the latest version of Converse.js via the
  24. CDN, it's generally better to load a specific version (preferably the
  25. latest one), to avoid breakage when new backwards-incompatible versions are
  26. released.
  27. Initializing Converse.js
  28. ------------------------
  29. You'll then need to initialize Converse.js with configuration settings relevant to your requirements.
  30. Refer to the :ref:`configuration-settings` section for info on all the available configuration settings.
  31. To quickly get started, you can put the following JavaScript code at the
  32. bottom of your page (after the closing *</body>* element)::
  33. <script>
  34. converse.initialize({
  35. bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
  36. show_controlbox_by_default: true
  37. });
  38. </script>
  39. The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
  40. Converse.js repository may serve as a nice usable example.
  41. Alternative builds of Converse.js
  42. =================================
  43. The minified ``.js`` and ``.css`` files provide the same functionality as is available
  44. on the `conversejs.org <https://conversejs.org>`_ website. Useful for testing or demoing.
  45. Converse.js is composed out of plugins, and you are able to exclude certain
  46. plugins (and to include your own new plugins) when creating a build. This
  47. enables you to create your own custom builds of Converse.js that differ from
  48. the standard one.
  49. Besides the standard build, the Converse.js repository includes configuration
  50. for certain other non-standard builds, which we'll now mention below.
  51. Mobile version
  52. --------------
  53. Besides the default build mentioned above, there is a build intended for mobile
  54. websites, called ``converse-mobile.min.js``.
  55. Take a look at the ``mobile.html`` file in the Converse.js repository
  56. for an example of this build being used. There's an additional CSS file called
  57. ``mobile.min.css`` which should be used with the mobile build.
  58. When you load `conversejs.org <https://conversejs.org>`_ with a mobile device
  59. then the mobile JavaScript build and its CSS will be used.
  60. Excluding all 3rd party dependencies
  61. ------------------------------------
  62. Then there is also a build that contains no 3rd party dependencies, called
  63. ``converse-no-dependencies.min.js`` and which is used in the ``non_amd.html``
  64. page in the repository.
  65. Headless build
  66. --------------
  67. There is also the option of making a headless build of converse.js.
  68. This means a build without any UI but still containing core functionality of
  69. maintaining a roster, chatboxes and messages.
  70. The file `src/headless.js <https://github.com/jcbrand/converse.js/blob/master/src/headless.js>`_
  71. is used to determine which plugins are included in the build.
  72. Unfortunately it's currently not yet possible to include Multi-user chat (MUC)
  73. functionality in the headless build. This is because both the UI and core
  74. functionality is still contained in one plugin and would first need to be
  75. split up into two parts, with the UI part dropped for this build.
  76. Fullscreen version
  77. ------------------
  78. Converse.js also comes in a fullscreen version.
  79. A hosted version is available online at `inverse.chat <https://inverse.chat>`_.
  80. Originally this version was available as a separate build file, but
  81. as of version 4.0.0 and higher, the difference between the "overlay" and the
  82. "fullscreen" versions of converse.js is simply a matter of configuring the
  83. :ref:`view_mode`.
  84. To generate the headless build, run ``make dist/converse-headless.js`` and/or
  85. ``make dist/converse-headless.min.js``.
  86. Where to go from here?
  87. ======================
  88. You might want to implement some kind of persistent single-session solution for
  89. your website, where users authenticate once in your website and are then
  90. automatically logged in to the XMPP server as well. For more info on how this
  91. can be achieved, read: :ref:`session-support`.
  92. Perhaps you want to create your own custom build of Converse.js? Then head over
  93. to the :doc:`builds` section, or more generally the :doc:`development`
  94. documentation.
  95. Do you want to know how to theme Converse.js? Then read the :doc:`theming`
  96. documentation.