quickstart.rst 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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. You can use the latest version of Converse at `conversejs.org <https://conversejs.org/fullscreen.html>`_.
  7. There are several ways to run Converse yourself or to add it to your website or web app:
  8. Option 1: Host it via your XMPP Server
  9. ======================================
  10. If you run your own XMPP server, check if it has a plugin for hosting Converse.
  11. For example, the following XMPP servers have plugins available:
  12. * **Openfire**: `inverse plugin <https://www.igniterealtime.org/projects/openfire/plugin-archive.jsp?plugin=inverse>`_
  13. * **Prosody**: `mod_conversejs <https://modules.prosody.im/mod_conversejs.html>`_
  14. * **ejabberd**: `mod_conversejs <https://docs.ejabberd.im/admin/configuration/modules/#mod-conversejs>`_
  15. .. warning::
  16. When configuring one of these plugins in production, it's good practice to use a specific version of the Converse resources to avoid breaking changes.
  17. For instance, this will configure ejabberd's, mod-conversejs to fetch a specific version instead of whichever is the latest one.
  18. .. code-block:: yml
  19. mod_conversejs:
  20. # Replace 11.0.1 with your desired version
  21. conversejs_css: https://cdn.conversejs.org/12.0.0/dist/converse.min.css
  22. conversejs_script: https://cdn.conversejs.org/12.0.0/dist/converse.min.js
  23. Option 2: Self-hosting
  24. ======================
  25. Getting the necessary files
  26. ---------------------------
  27. You can host Converse on your own server without requiring any XMPP server.
  28. There are three ways to get the necessary files:
  29. A. Using the CDN (Recommended)
  30. ******************************
  31. Converse provides a CDN (via `KeyCDN <https://www.keycdn.com/>`_) for easy integration.
  32. To use it, add these lines to your HTML page's ``<head>`` section:
  33. .. code-block:: html
  34. <!-- Replace 11.0.1 with your desired version -->
  35. <link rel="stylesheet" href="https://cdn.conversejs.org/12.0.0/dist/converse.min.css">
  36. <script src="https://cdn.conversejs.org/12.0.0/dist/converse.min.js" charset="utf-8"></script>
  37. .. warning::
  38. Always specify a version number in production to avoid breaking changes.
  39. B. Download Pre-built Files
  40. ***************************
  41. 1. Download the latest release from the `Converse GitHub releases page <https://github.com/conversejs/converse.js/releases>`_
  42. 2. Extract the archive file
  43. 3. Include the minified files in your HTML:
  44. .. code-block:: html
  45. <link rel="stylesheet" href="path/to/converse.min.css">
  46. <script src="path/to/converse.min.js" charset="utf-8"></script>
  47. .. important::
  48. * All the files from the ``dist`` directory need to be available and hosted on your server
  49. * Converse will dynamically load additional files from this directory
  50. * To use a different path, change the :ref:`assets_path` setting
  51. C. Build from Source
  52. ********************
  53. For custom builds and development, run the following commands:
  54. 1. ``git clone git@github.com:conversejs/converse.js.git`` to clone the repo.
  55. 2. ``cd converse.js && npm install`` to install dependencies
  56. 3. ``npm run build`` to build distribution files to the ``./dist`` folder
  57. 4. ``npm run serve`` to start a local server at port ``8080``.
  58. 5. You can now access Converse at http://localhost:8080/dev.html in your browser.
  59. See the :ref:`creating_builds` section for detailed build instructions and customization options.
  60. .. tip::
  61. You can run ``npm run watch`` to automatically rebuild the dist files whenever a source file changes.
  62. Initializing Converse
  63. ---------------------
  64. After building and including the necessary files, you need to initialize Converse:
  65. .. code-block:: html
  66. <script>
  67. converse.initialize();
  68. </script>
  69. See the :ref:`configuration-settings` section for all available initialization options and the
  70. `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file in the repository for a complete example.
  71. Display Modes
  72. *************
  73. Converse supports different display modes:
  74. * **Full page mode** (default): Chat takes up the entire page
  75. * **Overlay mode**: Chat appears in a corner of your page
  76. * **Embedded mode**: Chat appears embedded inside a container element in your page
  77. To use fullscreen mode, simply set the ``view_mode`` parameter:
  78. .. code-block:: javascript
  79. converse.initialize({
  80. view_mode: 'fullscreen' // other options are `overlay` and `embedded`
  81. });
  82. Further reading
  83. ===============
  84. Now that you have Converse running, you might want to:
  85. * Explore available :ref:`features <features>` (some require additional setup)
  86. * Implement :ref:`session-support` for single sign-on between your site and XMPP
  87. * Enable :ref:`OMEMO encryption <feature-omemo>` (requires loading `libsignal-protocol.js <https://github.com/signalapp/libsignal-protocol-javascript>`_)
  88. * Create :doc:`custom builds <builds>` with specific features
  89. * Customize the appearance with :doc:`theming <theming>`
  90. * Dive into :doc:`development <development>` to contribute or extend Converse