diff --git a/android/basic-example/README.md b/android/basic-example/README.md index 63b03eae..1e25fe5e 100644 --- a/android/basic-example/README.md +++ b/android/basic-example/README.md @@ -1,8 +1,6 @@ -TalkJS Basic Android Example -============================ +# TalkJS and Android basic example -This code shows how you can embed TalkJS into a WebView using Android. -The app itself is a minimal WhatsApp clone with a hardcoded contact list. +This code shows how you can embed TalkJS into a WebView using Android. The app itself is a minimal WhatsApp clone with a hardcoded contact list. It shows off three use cases: - Show a conversation list (the "inbox") @@ -13,3 +11,6 @@ How it works, in brief: 1. When the Inbox (`InboxTab`) is opened, a webview is created which runs the JS code in `asserts/chat.js`, which is generic for all three use cases 2. The JS code calls back into the app via `JavascriptCallbacks.getOptions` to determine what to do (open an inbox, start a chat with somebody, etc). Then, it calls TalkJS SDK methods as described in the [TalkJS docs](https://talkjs.com/docs). 3. When a user clicks on a conversation in the inbox, an intent is generated to navigate to the `ChatboxActivity`, which reuses the code above to display a chatbox of a single conversation, instead of a conversation list. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/android.basic-example.zip) diff --git a/android/file-upload-example/README.md b/android/file-upload-example/README.md index 157972f8..19fc2087 100644 --- a/android/file-upload-example/README.md +++ b/android/file-upload-example/README.md @@ -1,4 +1,4 @@ -# TalkJS Android File Upload Example +# Android file upload example This code shows how to implement file upload support in Android's WebView. Despite TalkJS already supporting uploading of files, the default Android WebView implementation @@ -6,12 +6,15 @@ does not implement file uploads. The code also shows how to upload rich content to TalkJS via the [unified API](https://developer.android.com/develop/ui/views/receive-rich-content) This enables users to upload images and videos from the clipboard, keyboard or through drag and drop. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/android.file-upload-example.zip) + ## Getting Started It is recommended to open this project in Android Studio so that Gradle sync is handled automatically for you. -Before running the app, don’t forget to replace the string, YOUR_APP_ID, with your TalkJS app ID from the dashboard. +Before running the app, don’t forget to replace the string, `YOUR_APP_ID`, with your app ID from the [TalkJS dashboard](https://talkjs.com/dashboard/). This code sample was used as part of two tutorials: diff --git a/angular/angular-chat-app/README.md b/angular/angular-chat-app/README.md index 90481da8..658a617d 100644 --- a/angular/angular-chat-app/README.md +++ b/angular/angular-chat-app/README.md @@ -2,6 +2,9 @@ This is an example project for TalkJS's tutorial on [how to build a chat into an Angular app with TalkJS](https://talkjs.com/resources/angular-chat-app/). +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-chat-app.zip) + ## Prerequisites To run this tutorial, you will need: @@ -13,7 +16,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-chat-app.zip). 2. Replace `YOUR_APP_ID_HERE` in `src/app/talk.service.ts` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). 3. Run `npm install` to install dependencies. 4. Run `ng serve` to start the server. diff --git a/angular/angular-getting-started/README.md b/angular/angular-getting-started/README.md index 2d63f0d2..ef8c4b3c 100644 --- a/angular/angular-getting-started/README.md +++ b/angular/angular-getting-started/README.md @@ -2,6 +2,9 @@ This is the example code for the [Angular getting started guide](https://talkjs.com/docs/Getting_Started/Frameworks/Angular/). +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-getting-started.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +15,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-getting-started.zip). 2. Replace `` in `src/app/talkjs-chat/talkjs-chat.component.ts` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Run `npm install` to install dependencies. 4. Run `ng serve` to start the server. diff --git a/chatbot-integration/anthropic-claude/README.md b/chatbot-integration/anthropic-claude/README.md index 562d5fb3..624a52c0 100644 --- a/chatbot-integration/anthropic-claude/README.md +++ b/chatbot-integration/anthropic-claude/README.md @@ -1,5 +1,10 @@ +# How to integrate Claude into your TalkJS chat with the Anthropic API + This is an example project for TalkJS's tutorial on [How to integrate Claude into your TalkJS chat with the Anthropic API](https://talkjs.com/resources/how-to-integrate-claude-into-your-talkjs-chat-with-the-anthropic-api/). The project uses TalkJS webhooks to listen for new message events from the TalkJS server, calls the Anthropic API to generate a message reply, and then adds the reply to the conversation with the TalkJS API. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.anthropic-claude.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +17,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.anthropic-claude.zip). 2. Replace `` and `` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Replace `` with your Anthropic API key 4. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard. diff --git a/chatbot-integration/google-gemini/README.md b/chatbot-integration/google-gemini/README.md index 57e3bdc8..beaeda19 100644 --- a/chatbot-integration/google-gemini/README.md +++ b/chatbot-integration/google-gemini/README.md @@ -1,5 +1,10 @@ +# How to integrate Google's Gemini into your TalkJS chat + This is an example project for TalkJS's tutorial on [How to integrate Google's Gemini into your TalkJS chat](https://talkjs.com/resources/create-a-chatbot-with-talkjs-and-gemini/). The project uses TalkJS webhooks to listen for new message events from the TalkJS server, calls the Gemini API to generate a message reply, and then adds the reply to the conversation with the TalkJS API. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.google-gemini.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +17,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.google-gemini.zip). 2. Replace `` and `` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Replace `` with your Anthropic API key 4. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard. diff --git a/chatbot-integration/openai-chatgpt/README.md b/chatbot-integration/openai-chatgpt/README.md index 00d0d9be..e5d1574c 100644 --- a/chatbot-integration/openai-chatgpt/README.md +++ b/chatbot-integration/openai-chatgpt/README.md @@ -1,7 +1,12 @@ +# How to integrate a chatbot into your TalkJS chat with the OpenAI API + This is an example project for TalkJS's tutorial on [How to integrate a chatbot into your TalkJS chat with the OpenAI API](https://talkjs.com/resources/how-to-make-a-customizable-chatbot-frontend-with-talkjs-and-the-openai-api/). The project uses TalkJS webhooks to listen for new message events from the TalkJS server, calls the OpenAI API to generate a message reply, and then adds the reply to the conversation with the TalkJS API. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.openai-chatgpt.zip) + ## Prerequisites To run this tutorial, you will need: @@ -14,7 +19,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.openai-chatgpt.zip). 2. Replace `` and `` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Replace `` with your OpenAI API key 4. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard. diff --git a/csharp/blazor_talkjs/README.md b/csharp/blazor_talkjs/README.md index 6bf99c17..6ac02f52 100644 --- a/csharp/blazor_talkjs/README.md +++ b/csharp/blazor_talkjs/README.md @@ -1,4 +1,4 @@ -# TalkJS and Blazor integration tutorial example +# TalkJS and Blazor example This is an example project for TalkJS's tutorial on [how to integrate TalkJS with a Blazor app](https://talkjs.com/resources/how-to-add-chat-to-a-blazor-web-app-with-talkjs/). @@ -6,6 +6,9 @@ This example demonstrates how to integrate TalkJS with a Blazor web application. - The `Blazor Web App` Interactive Server project which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Getting_Started/JavaScript_SDK) to create a one on one chat. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/csharp.blazor_talkjs.zip) + ## Prerequisites To run this tutorial project, you will need: @@ -14,7 +17,7 @@ To run this tutorial project, you will need: - .NET 8 [SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) - A code editor like [Visual Studio Code](https://code.visualstudio.com/download) or IDE like [Visual Studio](https://visualstudio.microsoft.com/vs/community/) -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/csharp.blazor_talkjs.zip). 1. Open the project in your code editor or IDE. 1. In the `Home.razor` page, replace `` in the `AppId` string property with your App Id which can be found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 1. From the `blazor_talkjs` directory, run the command `dotnet watch` to render your project on the browser. diff --git a/django/django_talkjs/README.md b/django/django_talkjs/README.md index b3a52495..b2961c27 100644 --- a/django/django_talkjs/README.md +++ b/django/django_talkjs/README.md @@ -2,6 +2,9 @@ This is an example project for TalkJS's tutorial on [how to build a Django chat app with TalkJS](https://talkjs.com/resources/how-to-build-a-django-chat-app-with-talkjs/). This example demonstrates how to integrate TalkJS with a Python application that uses the Django framework. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/django.django_talkjs.zip) + ## Prerequisites To run this tutorial, you will need: @@ -11,7 +14,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/django.django_talkjs.zip). 2. Replace `` in `talkjs/templates/talkjs/chat.html` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Install Django: ```bash diff --git a/django/gameschat/README.md b/django/gameschat/README.md index c86bb4e1..ac24fbca 100644 --- a/django/gameschat/README.md +++ b/django/gameschat/README.md @@ -1,25 +1,21 @@ -# Games Chat App with Django and TalkJS +# Games chat app with Django and TalkJS -## Context This directory contains two games chat applications: one with and one without TalkJS integrated. The application without chat functionality serves as a start application for the TalkJS implementation tutorial, in which chat functionalities are being added within a project. The final product of the tutorial is the games chat application with chat functionality. -## First things first +You can find additional information in the tutorial [How to add chat to a Django app with TalkJS](https://talkjs.com/tutorials/article/how-to-add-direct-messaging-to-a-discussion-forum-with-django-and-talkjs/). -### Python version -Make sure you're working with Python 3.7.4 or above. -You can download it from [here](https://www.python.org/). +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/django.gameschat.zip) -Make sure you tick the box that says 'Add Python to PATH'. +## Prerequisites -### PostgreSQL version -Make sure you're working with PostgreSQL 11.6 or above. -You can download it from [here](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads). - -Through the installation you will be asked to enter a password for your database. In this example the password `gameschat` is used, but you can write whatever you want, just make sure to remember it because you will need it later. +- **Python version:** Make sure you're working with Python 3.7.4 or above. You can download it from [here](https://www.python.org/). Make sure you tick the box that says 'Add Python to PATH'. +- **PostgreSQL version:** Make sure you're working with PostgreSQL 11.6 or above. You can download it from [here](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads). You'll be asked to enter a password for your database. In this example the password `gameschat` is used, but you can write whatever you want. Just make sure to remember your password because you'll need it later. ## Getting started + The following steps should be executed in either the ```gameschat-with-talkjs``` or ```gameschat-without-talkjs``` directory. - After the installation of PostgreSQL is done, start the `pgAdmin` which will open the database in your browser. Enter the password you chose during the installation. Expand the Servers section from the `Browser` on the right (if asked enter the same password again). Right click on `Databases->Create->Database...`, then enter the name you want and click `Save`. @@ -39,7 +35,8 @@ The following steps should be executed in either the ```gameschat-with-talkjs``` - After you've cloned/downloaded the repository, open the terminal in the project's directory and write `pip install -r requirements.txt`. After the installation is done, write `python manage.py migrate`. Lastly, write `python manage.py runserver`, this will start the server on port 8000. Go ahead and write the following in your browser `http://localhost:8000`. -Good job! Additional information can be found in the [tutorial](https://talkjs.com/tutorials/article/how-to-add-direct-messaging-to-a-discussion-forum-with-django-and-talkjs/) of this application. +Good job! ## Documentation + For more information on how to integrate TalkJS into your projects, check out our [documentation](https://talkjs.com/docs/?ref=gh-example-readme). \ No newline at end of file diff --git a/flask/README.md b/flask/README.md index e4d29fc0..d4e26b88 100644 --- a/flask/README.md +++ b/flask/README.md @@ -4,8 +4,8 @@ This is an example project for TalkJS's tutorial on [how to build a Flask chat a This example demonstrates how to integrate TalkJS with a Python application that uses the Flask framework. There are two projects present inside the repo: -- The `talkjs-flask-python` project contains the Flask backend, which serves a REST endpoint with user data. -- The `talkjs-frontend` project contains the frontend code, which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/) to create chats between users. +- `talkjs-flask-python`: This project contains the Flask backend, which serves a REST endpoint with user data. [Download `talkjs-flask-python` as a zip file.](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-flask-python.zip) +- `talkjs-frontend`: This project contains the frontend code, which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/) to create chats between users. [Download `talkjs-frontend` as a zip file.](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-frontend.zip) ## Prerequisites @@ -16,7 +16,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or download the project (as zip files: [`talkjs-flask-python`](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-flask-python.zip) and [`talkjs-frontend`](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-frontend.zip)). 1. From the `talkjs-flask-python` directory: 1. Run `pip install flask` and `pip install flask-cors` to install the dependencies 1. Run `python3 flask-python.py` to run the project diff --git a/flutter_sdk/basic-example/README.md b/flutter_sdk/basic-example/README.md index 9db4c0ad..069b31ae 100644 --- a/flutter_sdk/basic-example/README.md +++ b/flutter_sdk/basic-example/README.md @@ -1,8 +1,11 @@ -# TalkJS Flutter SDK example +# TalkJS and Flutter example -An example project that shows both the ChatBox and ConversationList widgets of TalkJS +An example project that shows both the [ChatBox](https://talkjs.com/docs/Reference/Flutter_SDK/Widgets/Chatbox/) and [ConversationList](https://talkjs.com/docs/Reference/Flutter_SDK/Widgets/ConversationList/) widgets of TalkJS. -## Getting Started +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/flutter_sdk.basic-example.zip) + +## Getting started The first thing to do is to install all the dependencies with the command: @@ -12,8 +15,7 @@ flutter pub get This is to be done only once. -After that, change in the `lib/main.dart` file the 'YOUR_APP_ID' string with a -valid appId. +After that, change in the `lib/main.dart` file the 'YOUR_APP_ID' string with a valid appId. Finally, connect an Android/iOS device or emulator and run: @@ -27,29 +29,17 @@ to run the example. This example uses the 'provider' package to manage a global app state. -The `MyAppState` class has a `session` and a `conversation` properties, that -are used by the ChatBox and ConversationList widgets. +The `MyAppState` class has a `session` and a `conversation` properties, that are used by the ChatBox and ConversationList widgets. -The `conversation` property is in reality a getter and setter pair, in order -to call the `notifyListeners()` functions whenever the `conversation` property -is changed. +The `conversation` property is in reality a getter and setter pair, in order to call the `notifyListeners()` functions whenever the `conversation` property is changed. -In our `main()` function the TalkJS Session is initialized, and is used as the -global app state. +In our `main()` function the TalkJS Session is initialized, and is used as the global app state. The app has 3 routes: -'/' contains the buttons to select either a ChatBox or ConversationList -'/chatbox' is the ChatBox screen, and finally -'/conversationlist' is the ConversationList screen. - -The ChatBoxScreen uses Consumer in order to get the global session -and conversation objects, and be able to rebuild itself whenever the global -state changes. +- '/' contains the buttons to select either a ChatBox or ConversationList +- '/chatbox' is the ChatBox screen, and finally +- '/conversationlist' is the ConversationList screen. -The ConversationList has an event called `onSelectConversation` that is -triggered when the user clicks on a conversation. -When the event is triggered, a new `Conversation` object is built, using the -`id` ov the selected conversation, then this object is assigned to the global -app state, and finally we navigate to the '/chatbox' route to show a ChatBox -widget with the selected conversation. +The ChatBoxScreen uses Consumer in order to get the global session and conversation objects, and be able to rebuild itself whenever the global state changes. +The ConversationList has an event called `onSelectConversation` that is triggered when the user clicks on a conversation. When the event is triggered, a new `Conversation` object is built, using the `id` of the selected conversation, then this object is assigned to the global app state, and finally we navigate to the '/chatbox' route to show a ChatBox widget with the selected conversation. diff --git a/howtos/how-to-add-a-create_new_chat-button-in-talkjs/Readme.md b/howtos/how-to-add-a-create_new_chat-button-in-talkjs/Readme.md index fec58847..bdeb4fd3 100644 --- a/howtos/how-to-add-a-create_new_chat-button-in-talkjs/Readme.md +++ b/howtos/how-to-add-a-create_new_chat-button-in-talkjs/Readme.md @@ -1,24 +1,24 @@ -## Article link +## How to add a 'Create a new chat' button -This is the example project for our [How to add a "Create new chat" button in TalkJS](https://talkjs.com/resources/how-to-add-a-create-new-chat-button-in-talkjs/) tutorial. +This is the example project for the tutorial [How to add a 'Create new chat' button in TalkJS](https://talkjs.com/resources/how-to-add-a-create-new-chat-button-in-talkjs/). ![Demo GIF]() +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-create_new_chat-button-in-talkjs.zip) + ## Running this project Follow these steps to run this project: -1. Clone this repository - +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-create_new_chat-button-in-talkjs.zip). 2. Open `create-new-chat.js` and update the TalkJS App ID and the TalkJS REST API key: ```javascript - const appId = "" + const appId = "" ``` -3. Start a web server in this directory and open the link in the browser. - - For example, you can use VS Code's [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension, or use Python to create a quick web server: +3. Start a web server in this directory and open the link in the browser. For example, you can use VS Code's [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension, or use Python to create a quick web server: ```shell python -m http.server diff --git a/howtos/how-to-add-a-custom-ui-talkjs-htmlpanels-with-vue/README.md b/howtos/how-to-add-a-custom-ui-talkjs-htmlpanels-with-vue/README.md index e8036f1a..c7e4e7b6 100644 --- a/howtos/how-to-add-a-custom-ui-talkjs-htmlpanels-with-vue/README.md +++ b/howtos/how-to-add-a-custom-ui-talkjs-htmlpanels-with-vue/README.md @@ -1,12 +1,16 @@ -# This sample code accompanies a guide on how to add a custom UI in talkjs html panels with vue +# How to add a custom UI in TalkJS HTML panels with Vue -- [Read it on our blog]({blog url}) +This example project accompanies the tutorial - [Read it on dev.to](https://dev.to/talkjs/how-to-add-a-custom-ui-in-talkjs-html-panels-with-vue-190p) +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-custom-ui-talkjs-htmlpanels-with-vue.zip) + ## How to run -1. Clone or download the project -2. Replace `YOUR_APP_ID` in `../components/HtmlPanels` with the `APP_ID` found in your [talkjs dashboard](https://talkjs.com/dashboard/login) -3. Install [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or [yarn](https://classic.yarnpkg.com/en/docs/install/) if you haven't already. Yarn was used in this tutorial + +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-custom-ui-talkjs-htmlpanels-with-vue.zip), +2. Replace `YOUR_APP_ID` in `../components/HtmlPanels` with the `APP_ID` found on the **Settings** page of your [Talkjs dashboard](https://talkjs.com/dashboard/login) +3. Install [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or [yarn](https://classic.yarnpkg.com/en/docs/install/), if you haven't already. This tutorial uses yarn. 4. Run `$ yarn && yarn serve ` to install dependencies and run the app -**Happy coding!** +Happy coding! diff --git a/howtos/how-to-add-a-gif-picker-to-your-talkjs-chat/README.md b/howtos/how-to-add-a-gif-picker-to-your-talkjs-chat/README.md index 0d27e356..c43b7649 100644 --- a/howtos/how-to-add-a-gif-picker-to-your-talkjs-chat/README.md +++ b/howtos/how-to-add-a-gif-picker-to-your-talkjs-chat/README.md @@ -1,8 +1,11 @@ -This is an example project to go with our tutorial on How to add a GIF picker to your TalkJS chat. +# How to add a GIF picker -[How to add a GIF picker to your TalkJS chat](https://talkjs.com/resources/how-to-add-a-gif-picker-to-your-talkjs-chat/) +This is an example project to go with the tutorial on [How to add a GIF picker to your TalkJS chat](https://talkjs.com/resources/how-to-add-a-gif-picker-to-your-talkjs-chat/). -The project uses TalkJS's [Action Buttons](https://talkjs.com/docs/Features/Customizations/Action_Buttons_Links/) to add a custom action to the message field that lets users add GIFs to their chats. The action is hooked to a backend server that calls the TalkJS REST API to upload the GIF and add it to the conversation. +The project uses TalkJS's [action buttons](https://talkjs.com/docs/Features/Customizations/Action_Buttons_Links/) to add a custom action to the message field that lets users add GIFs to their chats. The action is hooked to a backend server that calls the TalkJS REST API to upload the GIF and add it to the conversation. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-gif-picker-to-your-talkjs-chat.zip) ## Prerequisites @@ -14,8 +17,9 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download this project. -2. Go to your TalkJS dashboard and navigate to the **Themes** tab. Create a new theme called "gif_picker" based on the "default" theme. Add a custom action button, code, and the required styles from the tutorial. Go back to the **Roles** tab and set the UI Theme to "gif_picker". Don’t forget to click **Save all roles** to persist your changes. -3. Go to the **Settings** tab of your TalkJS dashboard and find your App ID. Add this to line 111 (``) of your `talkjs-giphy-integration/index.js` file. -4. Sign up for a basic [Giphy Developer](https://developers.giphy.com/dashboard/) account. To get an API key, you must create an app on Giphy and it generates an API key for you. Copy this API key and paste it in line 3 (``) of your `talkjs-giphy-integration/index.js` file. -5. Go to the `talkjs-giphy-integration` folder and run `npm install` followed by `npm run dev`. This installs the required dependencies for the frontend and runs the app at `localhost:1234`. \ No newline at end of file +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-gif-picker-to-your-talkjs-chat.zip). +2. In your [TalkJS dashboard](https://talkjs.com/dashboard/), navigate to the **Themes** tab. Create a new theme called "gif_picker" based on the "default" theme. Add a custom action button, code, and the required styles from the [tutorial]((https://talkjs.com/resources/how-to-add-a-gif-picker-to-your-talkjs-chat/)). +3. In the **Chat UI** tab, set the active theme to "gif_picker". +4. Go to the **Settings** tab of your TalkJS dashboard and find your app ID. Add this to line 111 (``) of your `talkjs-giphy-integration/index.js` file. +5. Sign up for a basic [Giphy Developer](https://developers.giphy.com/dashboard/) account. To get an API key, you must create an app on Giphy and it generates an API key for you. Copy this API key and paste it in line 3 (``) of your `talkjs-giphy-integration/index.js` file. +6. Go to the `talkjs-giphy-integration` folder and run `npm install` followed by `npm run dev`. This installs the required dependencies for the frontend and runs the app at `localhost:1234`. \ No newline at end of file diff --git a/howtos/how-to-add-a-hidden-user-to-a-talkjs-conversation/README.md b/howtos/how-to-add-a-hidden-user-to-a-talkjs-conversation/README.md index 26587bb0..b09c1d31 100644 --- a/howtos/how-to-add-a-hidden-user-to-a-talkjs-conversation/README.md +++ b/howtos/how-to-add-a-hidden-user-to-a-talkjs-conversation/README.md @@ -1,8 +1,11 @@ +# How to add a hidden user example + This is an example project to go with our tutorial on [how to add a hidden user to your TalkJS chat](https://talkjs.com/resources/how-to-add-a-hidden-user-to-a-talkjs-conversation/). - +This project adds a new [TalkJS theme](https://talkjs.com/docs/Features/Themes/) and edits different components within it to hide a user that has a custom property. -This project adds a new [TalkJS Theme](https://talkjs.com/docs/Features/Themes/) and edits different components within it to hide a user that has a custom property. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-hidden-user-to-a-talkjs-conversation.zip) ## Prerequisites @@ -12,8 +15,8 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download this project. -2. Go to `index.js`, and replace with your app ID from the TalkJS dashboard. +1. Clone or [download this project]((https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-hidden-user-to-a-talkjs-conversation.zip)). +2. Go to `index.js`, and replace `` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). 3. Go to your TalkJS dashboard and navigate to the **Themes** tab. Create a new theme called "hidden_user" based on the "default" theme. The project already adds a custom attribute to all users in the group chat as well as the default role. -4. Edit the theme as per the instructions in the article. +4. Edit the theme as per the instructions in the [tutorial](https://talkjs.com/resources/how-to-add-a-hidden-user-to-a-talkjs-conversation/). 5. Run the HTML file by opening it in your browser. diff --git a/howtos/how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat/README.md b/howtos/how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat/README.md index 665d0d4d..2763daa5 100644 --- a/howtos/how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat/README.md +++ b/howtos/how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat/README.md @@ -1,22 +1,21 @@ -# This sample code accompanies a guide on How to Add a Real-time Unread Conversation Counter to a TalkJS Chat +# How to add a real-time unread conversation counter to a TalkJS chat -- [Read it on our blog]({blog url}) -- [Read it on dev.to](https://dev.to/talkjs/how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat-2o05) +This example project accompanies the tutorial: [How to add an unread conversation counter to TalkJS](https://talkjs.com/resources/how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat/). -## Project Setup +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat.zip) -- index.php is a basic HTML page with a TalkJS instance. -- Replace the APP_ID in each index.php with your own APPID -- Copy index.php to your local server webroot (example: C:\wamp\www) -- Visit or the webroot from the browser to view the chat instance for this user. +## Project setup -## Initiate First Messages Using The Rest API +- `index.php` is a basic HTML page with a TalkJS instance. +- Replace the `APP_ID` in each `index.php` with your own app ID, which you can find on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). +- Copy `index.php` to your local server webroot (example: `C:\wamp\www`) +- Visit `` or the webroot from the browser to view the chat instance for this user. -- You can better understand this demo with multiple users chatting with each other. -- Therefore, you can create another index.php (user1/index.php) and replace the user id with a different one. You can create multiple Talkjs instances like this. -- Once you have your instances ready, now you can get a conversation going between these users using the REST API. - - -- After creating a conversation, send an initial message from each user to the conversation using the REST API. - - -- Now, your TalkJS instances should start showing up messages. -- Create multiple different conversations to understand better how the Unread counter works here. +## Initiate first messages using the TalkJS REST API + +- You can better understand this demo with multiple users chatting with each other. For that reason, create another `index.php` (`user1/index.php`) and replace the user ID with a different one. You can create multiple Talkjs instances like this. +- Once you have your instances ready, get a [conversation going between these users using the REST API](https://talkjs.com/docs/Reference/REST_API/Conversations/). +- After creating a conversation, send an initial [message from each user to the conversation using the REST API](https://talkjs.com/docs/Reference/REST_API/Messages/). +- Now, your TalkJS instances should start showing messages. +- Create multiple different conversations to better understand how the unread counter works. diff --git a/howtos/how-to-add-forwarding/README.md b/howtos/how-to-add-forwarding/README.md index a72e9ec0..c7073b4a 100644 --- a/howtos/how-to-add-forwarding/README.md +++ b/howtos/how-to-add-forwarding/README.md @@ -1,16 +1,19 @@ # How to add message forwarding to your chat -> [!TIP] -> [Download this example project as a zip file](https://download-directory.github.io?url=https://github.com/talkjs/talkjs-examples/tree/master/howtos/how-to-add-forwarding) (using a GitHub folder download tool) - This is an example project for TalkJS's tutorial on [How to add a forward message feature to your chat](https://talkjs.com/resources/how-to-add-a-forward-message-feature/). -![An inbox pre-built chat UI with on the left a list of conversations with one conversation selected. On the right it shows the selected conversation. The conversation contains three messages, of which the last message has at the top of the message body a right-pointing arrow and the italicized text ‘Forwarded’.](/howtos/how-to-add-forwarding/1-demo.gif) -*A conversation with a forwarded message* +
+ An inbox pre-built chat UI with on the left a list of conversations with one conversation selected. On the right it shows the selected conversation. The conversation contains three messages, of which the last message has at the top of the message body a right-pointing arrow and the italicized text ‘Forwarded’. +
A conversation with a forwarded message
+
This project uses custom [message actions](https://talkjs.com/docs/Features/Message_Features/Message_Actions/) and the [TalkJS REST API](https://talkjs.com/docs/Reference/REST_API/Getting_Started/Introduction/) to allow users to forward text-based messages to conversations that they're part of. -**Note:** This example implementation of message forwarding only supports forwarding text-based messages, not messages that are location shares, [voice messages](https://talkjs.com/docs/Features/Message_Features/Voice_Messages/), or [file attachments](https://talkjs.com/docs/Features/Message_Features/File_Sharing/). To extend the current functionality to also include forwarding files, see the information on [sending files with the REST API](https://talkjs.com/docs/Reference/REST_API/Messages/#send-a-file). +> [!NOTE] +> This example implementation of message forwarding only supports forwarding text-based messages, not messages that are location shares, [voice messages](https://talkjs.com/docs/Features/Message_Features/Voice_Messages/), or [file attachments](https://talkjs.com/docs/Features/Message_Features/File_Sharing/). To extend the current functionality to also include forwarding files, see the information on [sending files with the REST API](https://talkjs.com/docs/Reference/REST_API/Messages/#send-a-file). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-forwarding.zip) ## Prerequisites @@ -20,11 +23,12 @@ To run this example project, you need: - [Node.js](https://nodejs.org/en) - [npm](https://www.npmjs.com/) -**Note:** This guide uses `fetch` to be able to use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to get resources. `fetch` is available natively from Node.js 18 onward. If you use an older version of Node.js, you can use the [Node Fetch](https://www.npmjs.com/package/node-fetch) package. +> [!NOTE] +> This guide uses `fetch` to be able to use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to get resources. `fetch` is available natively from Node.js 18 onward. If you use an older version of Node.js, you can use the [Node Fetch](https://www.npmjs.com/package/node-fetch) package. ## How to run the example -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-forwarding.zip). 2. Add a custom message action to allow message forwarding. 1. On the **Chat UI** page of your [TalkJS dashboard](https://talkjs.com/dashboard/), select the role for which you'd like to edit the settings. This guide uses the `default` role. 2. Still on the **Chat UI** page, in the section 'Custom message actions', select **Add action** to add a message action. @@ -100,7 +104,10 @@ To run this example project, you need: You now have a working example project in which users can forward messages. -![In the top left a chat message with a dropdown menu with three options: 'Reply', 'Add reaction', and 'Forward'. In the bottom right a message with at the top a right-pointed arrow and the italicized text 'Forwarded'.](/howtos/how-to-add-forwarding/2-styling.png) -*A menu with the option to forward a message, and an example of a forwarded message* +
+ An inbox pre-built chat UI with on the left a list of conversations with one conversation selected. On the right it shows the selected conversation. The conversation contains three messages, of which the last message has at the top of the message body a right-pointing arrow and the italicized text ‘Forwarded’. +
A menu with the option to forward a message, and an example of a forwarded message
+
-**Note:** This example uses [Tailwind CSS](https://tailwindcss.com/) for styling. For ease of getting started, it adds Tailwind with the Play CDN, which is for development purposes only and should not be used in production. If you're planning to use Tailwind in production, follow the [installation instructions](https://tailwindcss.com/docs/installation). +> [!NOTE] +> This example uses [Tailwind CSS](https://tailwindcss.com/) for styling. For ease of getting started, it adds Tailwind with the Play CDN, which is for development purposes only and should not be used in production. If you're planning to use Tailwind in production, follow the [installation instructions](https://tailwindcss.com/docs/installation). diff --git a/howtos/how-to-add-tabs-to-your-inbox/README.md b/howtos/how-to-add-tabs-to-your-inbox/README.md index 04ec9db3..aef5ec39 100644 --- a/howtos/how-to-add-tabs-to-your-inbox/README.md +++ b/howtos/how-to-add-tabs-to-your-inbox/README.md @@ -2,6 +2,9 @@ This is an example project to go with the [How to add tabs to your inbox](https://talkjs.com/resources/how-to-add-tabs-to-your-inbox/) tutorial. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-tabs-to-your-inbox.zip) + ## Prerequisites To run this tutorial, you will need: @@ -10,7 +13,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download this project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-add-tabs-to-your-inbox.zip). 2. Go to `index.js`, and replace `` with your own app ID. You can find your app ID on the **Settings** page of the [TalkJS dashboard](https://talkjs.com/dashboard/). 3. Run the HTML file by opening it in your browser. diff --git a/howtos/how-to-archive-a-conversation/README.md b/howtos/how-to-archive-a-conversation/README.md index 52e83125..b936e45c 100644 --- a/howtos/how-to-archive-a-conversation/README.md +++ b/howtos/how-to-archive-a-conversation/README.md @@ -1,7 +1,12 @@ +# How to archive a conversation example + This is an example project for TalkJS's tutorial on [how to archive a conversation](https://talkjs.com/resources/how-to-archive-a-conversation/). The project uses TalkJS's [custom conversation actions](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to add a new "Archive conversation" option to the chat UI. It then listens for this custom action and sends the conversation ID to the backend server, which calls TalkJS's REST API to delete the conversation. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-archive-a-conversation.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,8 +17,8 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. -2. Go to the **Roles** tab of your TalkJS dashboard. In the **Custom conversation actions** section of the "default" role settings, add a new custom conversation action with a name of "archive" and a label of "Archive conversation". -3. Replace `` and `` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). +1. Clone or [download this project]((https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-archive-a-conversation.zip)). +2. Go to the **Chat UI** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). In the **Custom conversation actions** section of the "default" role settings, add a new custom conversation action with a name of "archive" and a label of "Archive conversation". +3. Replace `` and `` in `index.html` and `server.js` with the values found on the **Settings** page of your dashboard. 4. Run `npm install` to install dependencies. 5. Run `npm start` to create example users for the demo. diff --git a/howtos/how-to-archive-chats-in-a-talkjs-inbox/README.md b/howtos/how-to-archive-chats-in-a-talkjs-inbox/README.md index fa51c27d..1fb91d05 100644 --- a/howtos/how-to-archive-chats-in-a-talkjs-inbox/README.md +++ b/howtos/how-to-archive-chats-in-a-talkjs-inbox/README.md @@ -1,7 +1,12 @@ -+ [Read it on our blog](https://talkjs.com/resources/how-to-archive-chats-in-a-talkjs-inbox/) -+ [Read it on dev.to](https://dev.to/talkjs/how-to-archive-chats-in-a-talkjs-inbox-g4o) -## Project Setup +# How to archive chats in an inbox example -+ Replace the APP_ID in script.js with your own APPID -+ Create conversations with custom attributes "archived" and "supportTopic" -+ Create an inbox feed filter to display on conversations that satisfy the custom property we set earlier +This example project accompanies the tutorial: [How to archive chats in a TalkJS Inbox](https://talkjs.com/resources/how-to-archive-chats-in-a-talkjs-inbox/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-archive-chats-in-a-talkjs-inbox.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ Create conversations with custom attributes "archived" and "supportTopic". ++ Create an inbox feed filter to display on conversations that satisfy the custom property you set earlier. diff --git a/howtos/how-to-build-a-chat-app-that-looks-like-whatsapp-with-talkjs-chat-api/README.md b/howtos/how-to-build-a-chat-app-that-looks-like-whatsapp-with-talkjs-chat-api/README.md index a70699c7..95cf1e65 100644 --- a/howtos/how-to-build-a-chat-app-that-looks-like-whatsapp-with-talkjs-chat-api/README.md +++ b/howtos/how-to-build-a-chat-app-that-looks-like-whatsapp-with-talkjs-chat-api/README.md @@ -1,7 +1,12 @@ -+ [Read it on our blog](https://talkjs.com/resources/how-to-build-a-chat-app-that-looks-like-whatsapp-with-the-talkjs-chat-api/) -+ [Read it on dev.to](https://dev.to/talkjs/building-a-whatsapp-clone-with-talkjs-chat-api-cdf) -## Project Setup +# How to build a chat app that looks like WhatsApp with TalkJS -+ Replace the APP_ID in script.js with your own APPID -+ Create a new theme and apply it to the default role -+ Add the role property to your user and the other user and set it to default to apply the new theme \ No newline at end of file +This example project accompanies the tutorial: [How to build a chat app that looks like WhatsApp with TalkJS](https://talkjs.com/resources/how-to-build-a-chat-app-that-looks-like-whatsapp-with-the-talkjs-chat-api/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-build-a-chat-app-that-looks-like-whatsapp-with-talkjs-chat-api.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ Create a new theme and apply it to the default role. ++ Add the `role` property to your user and to the other user, and set it to `default` to apply the new theme. \ No newline at end of file diff --git a/howtos/how-to-build-a-chat-similar-to-upwork-with-talkjs/README.md b/howtos/how-to-build-a-chat-similar-to-upwork-with-talkjs/README.md index 37fb7cb4..ee3d10ad 100644 --- a/howtos/how-to-build-a-chat-similar-to-upwork-with-talkjs/README.md +++ b/howtos/how-to-build-a-chat-similar-to-upwork-with-talkjs/README.md @@ -1,7 +1,12 @@ -+ [Read it on our blog](https://talkjs.com/resources/how-to-build-a-chat-similar-to-upwork-with-talkjs/) -+ [Read it on dev.to](https://dev.to/talkjs/how-to-build-a-chat-similar-to-upwork-with-talkjs-4la9) -## Project Setup +# How to build a chat similar to Upwork with TalkJS -+ Replace the APP_ID in script.js with your own APPID -+ Create a new theme and apply it to the default role -+ Add the role property to your user and the other user and set it to default to apply the new theme \ No newline at end of file +This example project accompanies the tutorial: [How to build a chat similar to Upwork with TalkJS](https://talkjs.com/resources/how-to-build-a-chat-similar-to-upwork-with-talkjs/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-build-a-chat-similar-to-upwork-with-talkjs.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ On the [**Themes** page](https://talkjs.com/dashboard/themes) of your dashboard, create a new theme and apply it to the `default` role. ++ Add the [`role` property](https://talkjs.com/docs/Reference/Concepts/Roles/) to your user and the other user, and set it to `default` to apply the new theme. \ No newline at end of file diff --git a/howtos/how-to-build-a-chat-that-looks-like-linkedin-chat-with-talkjs-chat-api/README.md b/howtos/how-to-build-a-chat-that-looks-like-linkedin-chat-with-talkjs-chat-api/README.md index 4b5646ad..d397f284 100644 --- a/howtos/how-to-build-a-chat-that-looks-like-linkedin-chat-with-talkjs-chat-api/README.md +++ b/howtos/how-to-build-a-chat-that-looks-like-linkedin-chat-with-talkjs-chat-api/README.md @@ -1,7 +1,12 @@ -+ [Read it on our blog](https://talkjs.com/resources/how-to-build-a-linkedin-lookalike-chat-using-talkjs-chat-api/) -+ [Read it on dev.to](https://dev.to/talkjs/how-to-build-a-linkedin-lookalike-chat-using-talkjs-chat-api-1o0k) -## Project Setup +# How to build a LinkedIn lookalike chat by using TalkJS -+ Replace the APP_ID in script.js with your own APPID -+ Create a new theme and apply it to the default role -+ Add the role property to your user and the other user and set it to default to apply the new theme \ No newline at end of file +This example project accompanies the tutorial: [How to build a LinkedIn lookalike chat by using TalkJS](https://talkjs.com/resources/how-to-build-a-linkedin-lookalike-chat-using-talkjs-chat-api/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-build-a-chat-that-looks-like-linkedin-chat-with-talkjs-chat-api.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ Create a new theme and apply it to the default role. ++ Add the [`role` property](https://talkjs.com/docs/Reference/Concepts/Roles/) to your user and the other user and set it to default to apply the new theme. \ No newline at end of file diff --git a/howtos/how-to-build-an-airbnb-chat-lookalike-with-talkjs/README.md b/howtos/how-to-build-an-airbnb-chat-lookalike-with-talkjs/README.md index 6b2bc1e4..57c1b8b8 100644 --- a/howtos/how-to-build-an-airbnb-chat-lookalike-with-talkjs/README.md +++ b/howtos/how-to-build-an-airbnb-chat-lookalike-with-talkjs/README.md @@ -1,7 +1,12 @@ -+ [Read it on our blog](https://talkjs.com/resources/build-a-messaging-inbox-similar-to-airbnb-by-using-talkjs/) -+ [Read it on dev.to](https://dev.to/talkjs/how-to-build-an-airbnb-chat-lookalike-with-talkjs-2di8) -## Project Setup +# Build a messaging inbox similar to Airbnb by using TalkJS -+ Replace the APP_ID in script.js with your own APPID -+ Create a new theme and apply it to the default role -+ Add the role property to your user and the other user and set it to default to apply the new theme \ No newline at end of file +This example project accompanies the tutorial: [Build a messaging inbox similar to Airbnb by using TalkJS](https://talkjs.com/resources/build-a-messaging-inbox-similar-to-airbnb-by-using-talkjs/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-build-an-airbnb-chat-lookalike-with-talkjs.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ Create a new theme and apply it to the `default` role. ++ Add the [`role` property](https://talkjs.com/docs/Reference/Concepts/Roles/) to your user and the other user, and set it to `default` to apply the new theme. \ No newline at end of file diff --git a/howtos/how-to-build-custom-support-chat-solution/README.md b/howtos/how-to-build-custom-support-chat-solution/README.md index e69de29b..10408b5e 100644 --- a/howtos/how-to-build-custom-support-chat-solution/README.md +++ b/howtos/how-to-build-custom-support-chat-solution/README.md @@ -0,0 +1,6 @@ +# How to build a custom support chat solution with TalkJS + +This example project accompanies the tutorial: [How to build a custom support chat solution with TalkJS](https://talkjs.com/resources/how-to-build-a-custom-support-chat-solution-with-talkjs/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-build-custom-support-chat-solution.zip) \ No newline at end of file diff --git a/howtos/how-to-create-a-channel-list-in-talkjs-chat/README.md b/howtos/how-to-create-a-channel-list-in-talkjs-chat/README.md index 2bc06dcb..6829831a 100644 --- a/howtos/how-to-create-a-channel-list-in-talkjs-chat/README.md +++ b/howtos/how-to-create-a-channel-list-in-talkjs-chat/README.md @@ -1,11 +1,12 @@ -# This sample code accompanies a guide on How to create a channel list in TalkJS chat +# How to create a channel list in TalkJS chat -- [Read it on our blog]({blog url}) -- Read it on [dev.to](https://dev.to/talkjs/how-to-create-a-channel-list-in-talkjs-chat-4d4n) +This sample code accompanies the tutorial: [How to create a channel list in TalkJS chat](https://talkjs.com/resources/how-to-create-a-channel-list-in-talkjs-chat/). -## Project Setup +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-channel-list-in-talkjs-chat.zip) -- All HTML, CSS and JavaScript code is contained within the index.html file for the sake of simplicity. -- Replace the APP_ID in each index.html with your own APP_ID. This can be found on your [TalkJS dashboard](https://talkjs.com/dashboard/login). -- You can see the demo running by opening the index.html file in your favorite browser, it's that simple! +## Project setup +- All HTML, CSS and JavaScript code is contained within the `index.html` file for the sake of simplicity. +- Replace the `APP_ID` in each `index.html` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). +- Run the demo by opening the `index.html` file in your browser, it's that simple! diff --git a/howtos/how-to-create-a-direct-message-chat-with-contact-list/README.md b/howtos/how-to-create-a-direct-message-chat-with-contact-list/README.md new file mode 100644 index 00000000..9c49669e --- /dev/null +++ b/howtos/how-to-create-a-direct-message-chat-with-contact-list/README.md @@ -0,0 +1,6 @@ +# How to create a direct message chat with a contact list using TalkJS + +This is an example project related to the tutorial [How to create a direct message chat with a contact list using TalkJS](https://talkjs.com/resources/chat-contact-list/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-direct-message-chat-with-contact-list.zip) \ No newline at end of file diff --git a/howtos/how-to-create-a-message-center/README.md b/howtos/how-to-create-a-message-center/README.md index 1fabeaa7..5b97c217 100644 --- a/howtos/how-to-create-a-message-center/README.md +++ b/howtos/how-to-create-a-message-center/README.md @@ -1,7 +1,12 @@ +# How to create a message center with TalkJS + This is an example project for TalkJS's tutorial on [how to create a message center](https://talkjs.com/resources/how-to-create-a-message-center/). The project uses TalkJS's [REST API](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to create messages and set the user's conversation access to read-only, and then hides the message field of the inbox. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-message-center.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +17,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project]((https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-message-center.zip)). 2. Replace `` and `` in `index.html` and `seed-users.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Run `npm install` to install dependencies. 4. Run `npm start` to create example users for the demo. diff --git a/howtos/how-to-create-a-poll/README.md b/howtos/how-to-create-a-poll/README.md index 9f1ac636..5851f046 100644 --- a/howtos/how-to-create-a-poll/README.md +++ b/howtos/how-to-create-a-poll/README.md @@ -1,7 +1,11 @@ -This is an example project for our tutorial on [how to create a poll with TalkJS](https://talkjs.com/resources/how-to-create-a-poll-in-talkjs/). +# How to create a poll in TalkJS -This project uses [HTML Panels](https://talkjs.com/docs/Features/Customizations/HTML_Panels/) to allow you to display a HTML document in your chats, just above the message field. We’ll use a panel to display the results of a poll, where users voted using custom action buttons. The question in this poll is sent as a System Message. This System Message is created through a call to a backend server through TalkJS’s REST API. +This is an example project for the tutorial on [how to create a poll with TalkJS](https://talkjs.com/resources/how-to-create-a-poll-in-talkjs/). +This project uses [HTML Panels](https://talkjs.com/docs/Features/Customizations/HTML_Panels/) to allow you to display a HTML document in your chats, just above the message field. We’ll use a panel to display the results of a poll, where users voted using custom action buttons. The question in this poll is sent as a [System Message](https://talkjs.com/docs/Reference/Concepts/System_Messages/). This System Message is created through a call to a backend server through TalkJS’s [REST API](https://talkjs.com/docs/Reference/REST_API/Getting_Started/Introduction/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-poll.zip) ## Prerequisites @@ -13,7 +17,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project]((https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-poll.zip)). 2. Replace `` and `` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Run `npm install` to install dependencies. 4. Run `npm start` to start the server. diff --git a/howtos/how-to-create-a-popup-inbox/README.md b/howtos/how-to-create-a-popup-inbox/README.md index 14da096a..d9c5c70f 100644 --- a/howtos/how-to-create-a-popup-inbox/README.md +++ b/howtos/how-to-create-a-popup-inbox/README.md @@ -1,7 +1,12 @@ +# How to set up the Inbox UI mode as a pop-up + This is an example project for TalkJS's tutorial on [how to create a popup inbox](https://talkjs.com/resources/how-to-create-a-pop-up-inbox-in-talkjs/). The project uses TalkJS's [Inbox UI mode](https://talkjs.com/docs/Features/Chat_UI_Modes/The_Inbox/) as a popup element. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-popup-inbox.zip) + ## Prerequisites To run this tutorial, you will need: @@ -10,5 +15,5 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project]((https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-popup-inbox.zip)). 2. Replace `` in `script.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). diff --git a/howtos/how-to-create-a-youtube-chatroom/README.md b/howtos/how-to-create-a-youtube-chatroom/README.md index f51e8256..b7e8094b 100644 --- a/howtos/how-to-create-a-youtube-chatroom/README.md +++ b/howtos/how-to-create-a-youtube-chatroom/README.md @@ -1,3 +1,12 @@ -There are many scenarios where a chat can have more than two participants, for example an online class or a gaming chatroom. This tutorial will detail how to implement group chat functionality allowing multiple users using TalkJS. +# How to build a live comments section similar to Youtube Live -Replace "YOUR_APP_ID" with the app Id from your TalkJS dashboard. \ No newline at end of file +This example project accompanies the tutorials [How to build a live comments section similar to Youtube Live](https://talkjs.com/resources/how-to-build-a-live-comments-section-like-youtube-live/) + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-a-youtube-chatroom.zip) + +## Note + +There are many scenarios where a chat can have more than two participants, for example an online class or a gaming chatroom. This tutorial will detail how to implement group chat functionality allowing multiple users using TalkJS. + +Replace `"YOUR_APP_ID"` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). \ No newline at end of file diff --git a/howtos/how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api/README.md b/howtos/how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api/README.md index 434c48aa..ee99497b 100644 --- a/howtos/how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api/README.md +++ b/howtos/how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api/README.md @@ -1,7 +1,12 @@ -+ [Read it on our blog](https://talkjs.com/resources/how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api/) -+ [Read it on dev.to](https://dev.to/talkjs/how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api-3jo6) -## Project Setup +# How to create direct messaging like on Twitter with TalkJS -+ Replace the APP_ID in script.js with your own APPID -+ Create a new theme and apply it to the default role -+ Add the role property to your user and the other user and set it to default to apply the new theme \ No newline at end of file +This example project accompanies the tutorial: [How to create direct messaging like on Twitter with TalkJS](https://talkjs.com/resources/how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-create-direct-messages-like-on-twitter-with-the-talkjs-chat-api.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ Create a new theme and apply it to the `default` role. ++ Add the [`role` property](https://talkjs.com/docs/Reference/Concepts/Roles/) to your user and the other user, and set it to `default` to apply the new theme. \ No newline at end of file diff --git a/howtos/how-to-delete-a-conversation/README.md b/howtos/how-to-delete-a-conversation/README.md index 4cc2fdf9..5f24e57d 100644 --- a/howtos/how-to-delete-a-conversation/README.md +++ b/howtos/how-to-delete-a-conversation/README.md @@ -1,7 +1,12 @@ +# How to add a 'delete conversation' option to TalkJS + This is an example project for TalkJS's tutorial on [how to delete a conversation](https://talkjs.com/resources/how-to-delete-a-conversation/). The project uses TalkJS's [custom conversation actions](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to add a new "Delete conversation" option to the chat UI. It then listens for this custom action and sends the conversation ID to the backend server, which calls TalkJS's REST API to delete the conversation. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-delete-a-conversation.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,8 +17,8 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. -2. Go to the **Roles** tab of your TalkJS dashboard. In the **Custom conversation actions** section of the "default" role settings, add a new custom conversation action with a name of "delete" and a label of "Delete conversation". +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-delete-a-conversation.zip). +2. Go to the **Chat UI** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/). In the **Custom conversation actions** section of the 'default' role settings, add a new custom conversation action with a name of "delete" and a label of "Delete conversation". 3. Replace `` and `` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 4. Run `npm install` to install dependencies. 5. Run `npm start` to start the server. diff --git a/howtos/how-to-hide-some-chat-messages-for-certain-users-in-a-talkjs-chat/README.md b/howtos/how-to-hide-some-chat-messages-for-certain-users-in-a-talkjs-chat/README.md index f626cd8c..19af5bc6 100644 --- a/howtos/how-to-hide-some-chat-messages-for-certain-users-in-a-talkjs-chat/README.md +++ b/howtos/how-to-hide-some-chat-messages-for-certain-users-in-a-talkjs-chat/README.md @@ -1,32 +1,32 @@ -# This sample code accompanies a guide on How to Hide Some Chat Messages for Certain Users in a TalkJS Chat +# How to hide messages for users in a TalkJS chat -- [Read it on our blog]({blog url}) -- [Read it on dev.to](https://dev.to/talkjs/how-to-hide-some-chat-messages-for-certain-users-in-a-talkjs-chat-23g4) +This sample code accompanies a guide on [How to hide messages for users in a TalkJS chat](https://talkjs.com/resources/how-to-hide-some-chat-messages-for-certain-users-in-a-talkjs-chat/). -## Project Setup +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-hide-some-chat-messages-for-certain-users-in-a-talkjs-chat.zip) -- Each folder contains a TalkJS instance (index.php) for a different user. -- Replace the APP_ID in each index.php with your own APPID -- Copy the entire folder onto your local server webroot (example: C:\wamp\www) -- index.php +## Project setup + +- Each folder contains a TalkJS instance (`index.php`) for a different user. +- Replace the `APP_ID` in each `index.php` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). +- Copy the entire folder onto your local server webroot (example: `C:\wamp\www`) +- `index.php` - User: Chris Pratt, Role: Accountant - - Visit or the webroot from the browser to view the chat instance for this user. -- Sundar/index.php + - Visit https://localhost or the webroot from the browser to view the chat instance for this user. +- `Sundar/index.php` - User: Sundar, Role: Staff - - Visit from the browser to view the chat instance for this user. -- Admin/index.php + - Visit https://localhost/Sundar from the browser to view the chat instance for this user. +- `Admin/index.php` - User: Stella, Role: Admin - - Visit from the browser to view the chat instance for this user. -- Banned/index.php + - Visit https://localhost/Admin from the browser to view the chat instance for this user. +- `Banned/index.php` - User: Matt Wong, Role: Banned - - Visit from the browser to view the chat instance for this user. + - Visit https://localhost/Banned from the browser to view the chat instance for this user. ## Initiate First Messages Using The Rest Api -- At first, the chat window will be empty. To get a conversation going between these 4 users, create a conversation using the REST API and add these 4 users to the participants list. - - -- After creating a conversation, send an initial message from each user to the conversation using the REST API. - - +- At first, the chat window will be empty. To get a conversation going between these 4 users, [create a conversation using the REST API](https://talkjs.com/docs/Reference/REST_API/Conversations/) and add these 4 users to the participants list. +- After creating a conversation, [send an initial message from each user to the conversation using the REST API](https://talkjs.com/docs/Reference/REST_API/Messages/). - Now every users TalkJS instances should start showing up messages. -**You are now free to start playing around and apply differnt filters!** +You are now free to start playing around and apply different filters! diff --git a/howtos/how-to-integrate-ngrok-with-talkjs-to-receive-webhooks/README.md b/howtos/how-to-integrate-ngrok-with-talkjs-to-receive-webhooks/README.md index 76d13d92..ebabad00 100644 --- a/howtos/how-to-integrate-ngrok-with-talkjs-to-receive-webhooks/README.md +++ b/howtos/how-to-integrate-ngrok-with-talkjs-to-receive-webhooks/README.md @@ -1,9 +1,14 @@ -+ [Read it on our blog](https://talkjs.com/resources/how-to-integrate-ngrok-with-talkjs-to-receive-webhooks-locally/) -+ [Read it on dev.to](https://dev.to/talkjs/how-to-integrate-ngrok-with-talkjs-to-receive-webhooks-locally-523f) -## Project Setup - -+ Replace the APP_ID in script.js with your own APPID -+ Open up your TalkJS Dashboard and scroll down to the webhooks section. Select the webhooks you want to receive. -+ Start server.js and use ngrok to expose the port -+ Copy the server URL from ngrok console to the TalkJS Dashboard -+ Now, you should be able to receive webhooks based on events to your local server +# How to integrate ngrok and TalkJS to receive webhooks locally + +This example project accompanies the tutorial: [How to integrate ngrok and TalkJS to receive webhooks locally](https://talkjs.com/resources/how-to-integrate-ngrok-with-talkjs-to-receive-webhooks-locally/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-integrate-ngrok-with-talkjs-to-receive-webhooks.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ Open up your TalkJS dashboard and scroll down to the webhooks section. Select the webhooks you want to receive. ++ Start `server.js` and use ngrok to expose the port. ++ Copy the server URL from ngrok console to the TalkJS Dashboard. ++ Now, you should be able to receive webhooks based on events to your local server. diff --git a/howtos/how-to-let-visitors-join-a-chat/README.md b/howtos/how-to-let-visitors-join-a-chat/README.md index 58978052..8caea975 100644 --- a/howtos/how-to-let-visitors-join-a-chat/README.md +++ b/howtos/how-to-let-visitors-join-a-chat/README.md @@ -1,13 +1,18 @@ -# Chatting without an account -In this example we will show you how to let users join a conversation without needing an account. It will also give the option for users to set their email in the chat to receive notifications. The example popup will look like this: +# How to let visitors start a chat without registering for an account -![text](https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2F508cec80a2254a06a817e35f8b86f31c%2Fimage.png?alt=media&token=c5b55860-f273-4bc1-88e1-6fe5f6f6b8a9) +This example project accompanies the tutorial [How to let visitors start a chat without registering for an account](https://talkjs.com/resources/can-we-let-visitors-start-a-chat-without-registering-for-an-account/). It shows you how to let users join a conversation without needing an account. It will also give the option for users to set their email in the chat to receive notifications. The example popup will look like this: + +![A chat with a single message and a popup inside the chat with the text 'Get notified by email', and a field to fill out one's email](https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2F508cec80a2254a06a817e35f8b86f31c%2Fimage.png?alt=media&token=c5b55860-f273-4bc1-88e1-6fe5f6f6b8a9) Even though `add-user-info.php` is written in PHP for this example, you can use any framework you desire. `add-user-info.php` sets and reads cookies, makes API calls and hides your secret key. If you need help with other languages, please [let us know](https://talkjs.com/?chat) and we can create it. -We will be using HTML panels in this example. Be sure to read up on our docs [here](https://talkjs.com/docs/Features/Customizations/HTML_Panels.html) to learn all it's functionalities. +We will be using HTML panels in this example. [Read more on HTML panels.](https://talkjs.com/docs/Features/Customizations/HTML_Panels/) + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-let-visitors-join-a-chat.zip) ## Getting started + `example-chat.js` gives you a basic example on how this integration could look on a marketplace based website. Before being able to use `example-chat.js` we need to change a few variables specific to your application. These variables can be found in the file `add-user-info.php` and `example-chat.js`. At the top of `add-user-info.php` you should see `appId` and `secretKey`. These are used to send API calls to the TalkJS backend specific to your application. These values can be found inside your application dashboard [here](https://talkjs.com/dashboard/). @@ -24,4 +29,5 @@ Once these files are edited to fit your use case you can start your application. ``` ## Important + We recommend that you host this HTML document, `form-signup.html`, on the same domain (and subdomain) as your main site. This is because browsers have a security feature called the [Same-Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) which severely limits the kind of programmatic interaction you can do with iframes hosted on different domains. diff --git a/howtos/how-to-listen-for-unread-messages/README.md b/howtos/how-to-listen-for-unread-messages/README.md index 8a80bceb..4f6c1244 100644 --- a/howtos/how-to-listen-for-unread-messages/README.md +++ b/howtos/how-to-listen-for-unread-messages/README.md @@ -1,9 +1,12 @@ # How to listen for unread messages -This example shows you how to get the current user's unread messages with [`Session.unreads`](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Session/#Session__unreads). +This example accompanies the tutorial [How to add an unread conversation counter to TalkJS](https://talkjs.com/resources/how-to-add-a-real-time-unread-conversation-counter-to-a-talkjs-chat/). It shows you how to get the current user's unread messages with [`Session.unreads`](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Session/#Session__unreads). See our [Browser notifications](https://talkjs.com/docs/Features/Notifications/Browser_Notifications/#a-notifier-badge-in-your-navigation-bar) docs for more details. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-listen-for-unread-messages.zip) + ## How to run the example - Replace `` in `index.html` and `other.html` with your App ID. You can find this in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/app/tZNWA0Ox/settings) diff --git a/howtos/how-to-lock-a-conversation-to-read-only/README.md b/howtos/how-to-lock-a-conversation-to-read-only/README.md index 7dc8c614..7485ef6f 100644 --- a/howtos/how-to-lock-a-conversation-to-read-only/README.md +++ b/howtos/how-to-lock-a-conversation-to-read-only/README.md @@ -1,7 +1,12 @@ +# How to lock a conversation to be read-only + This is an example project for TalkJS's tutorial on [How to lock a conversation to be read-only](https://talkjs.com/resources/how-to-lock-a-conversation-to-be-read-only/). The project uses TalkJS's [custom conversation actions](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to add a new "Set read-only" option to the chat inbox UI. We add code to listen for this custom action and use the [ConversationBuilder.setParticipant](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/ConversationBuilder/#ConversationBuilder__setParticipant) method to set each participant's access level to read-only. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-lock-a-conversation-to-read-only.zip) + ## Prerequisites To run this tutorial, you will need: @@ -10,8 +15,10 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. -2. Go to the **Roles** tab of your TalkJS dashboard. Create a new role called "admin". -3. Click on the settings for the new admin role. In the **Custom conversation actions** section, add a new custom conversation action with a name of "setReadOnly" and a label of "Set Read-Only". -4. Replace `` in the `index.html` file with the value found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). -5. Open index.html, or run debug the program in your IDE of choice. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-lock-a-conversation-to-read-only.zip). +2. At the top of the **Chat UI** page of your [TalkJS dashboard](https://talkjs.com/dashboard/), select **Edit roles** and create a new role called "admin". +3. Again on the **Chat UI** page, select to edit the settings for the new admin role. +4. Go to the **Custom conversation actions** section on the same page, and add a new custom conversation action with a name of "setReadOnly" and a label of "Set Read-Only". +5. Replace `` in the `index.html` file with the value found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). +6. Open `index.html` to view the chat. + diff --git a/howtos/how-to-make-a-clickable-profile-link/README.md b/howtos/how-to-make-a-clickable-profile-link/README.md index ab45b629..65affa28 100644 --- a/howtos/how-to-make-a-clickable-profile-link/README.md +++ b/howtos/how-to-make-a-clickable-profile-link/README.md @@ -1,9 +1,14 @@ +# How to add custom links to a user’s profile + This is an example project for TalkJS's tutorial on [how to add a custom link to a user's profile](https://talkjs.com/resources/how-to-make-a-clickable-link-to-a-users-profile/). This project uses TalkJS's [action buttons feature](https://talkjs.com/docs/Features/Customizations/Action_Buttons_Links/). The action button in this example links to a user's profile page. The frontend fetches the data from a backend ExpressJS server that returns the list of users, the information about the current user and the current template. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-make-a-clickable-profile-link.zip) + ## Prerequisites To run this tutorial, you will need: @@ -14,7 +19,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-make-a-clickable-profile-link.zip). 2. Replace `` in `server.js` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Run `npm install` to install dependencies. 4. Run `npm start` to start the server. diff --git a/howtos/how-to-make-a-threaded-chat/README.md b/howtos/how-to-make-a-threaded-chat/README.md index e03a8fbd..e8f773fa 100644 --- a/howtos/how-to-make-a-threaded-chat/README.md +++ b/howtos/how-to-make-a-threaded-chat/README.md @@ -1,7 +1,12 @@ -This is an example project for TalkJS's tutorial on [how to make a comment section with threaded replies](https://talkjs.com/resources/how-to-build-a-reply-thread-feature-with-talkjs/). +# How to build a reply thread feature with TalkJS + +This is an example project for TalkJS's tutorial on [how to build a reply thread feature with TalkJS](https://talkjs.com/resources/how-to-build-a-reply-thread-feature-with-talkjs/). This project uses action buttons and the REST API to add a custom reply option that opens a new conversation for replies, and a back button to navigate back to the original message. It also uses a webhook to listen for new messages and updates the reply action button to show the number of replies. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-make-a-threaded-chat.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +17,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-make-a-threaded-chat.zip). 2. Run `npm install` to install dependencies. 3. Run `npm start` to start the server. 4. Remove the default "Reply" message action: diff --git a/howtos/how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels/README.md b/howtos/how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels/README.md index 409e2c40..0b481ef5 100644 --- a/howtos/how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels/README.md +++ b/howtos/how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels/README.md @@ -1,6 +1,11 @@ -+ [Read it on our blog](https://talkjs.com/resources/how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels/) -+ [Read it on dev.to](https://dev.to/talkjs/how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels-4moi) -## Project Setup +# How to make an interactive in-chat questionnaire in TalkJS -+ Replace the APP_ID in script.js with your own APPID -+ Start the chat with "No" to start answering the questionnaire +This example project accompanies the tutorial [How to make an interactive in-chat questionnaire in TalkJS](https://talkjs.com/resources/how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-make-an-interactive-in-chat-questionnaire-with-talkjs-html-panels.zip) + +## Project setup + ++ Replace the `APP_ID` in `script.js` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). ++ Start the chat with "No" to start answering the questionnaire. diff --git a/howtos/how-to-make-clickable-tabs-for-conversations/README.md b/howtos/how-to-make-clickable-tabs-for-conversations/README.md index 35682e36..d480681f 100644 --- a/howtos/how-to-make-clickable-tabs-for-conversations/README.md +++ b/howtos/how-to-make-clickable-tabs-for-conversations/README.md @@ -1,8 +1,13 @@ +# How to make clickable tabs for conversations - example project + This is an example project for TalkJS's tutorial on [how to make clickable tabs for conversations](https://talkjs.com/resources/how-to-make-clickable-tabs-for-conversations/). The project uses TalkJS's [custom message actions ](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Chatbox/#Chatbox__onCustomMessageAction) to add a new "Open Tab" option to each message a user sends in the chatbox UI. If the "Open Tab" option is clicked for a given message, a tab gets created and the chatbox switches to a private conversation between you and the user who sent the message. Use these new tabs to navigate between conversations. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-make-clickable-tabs-for-conversations.zip) + ## Prerequisites To run this tutorial, you will need: @@ -13,9 +18,9 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-make-clickable-tabs-for-conversations.zip). 2. Go to the **Chat UI** tab of your TalkJS dashboard. In the **Custom message actions** section of the "default" role settings, add a new custom conversation action with a name of "openTab" and a label of "Open tab". 3. Replace `` and `` in `index.html` and `seed-users.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 4. Run `npm install` to install dependencies. 5. Run `npm start` to create example users for the demo. -6. Open the index.html file. +6. Open the `index.html` file. diff --git a/howtos/how-to-mark-a-conversation-as-answered/README.md b/howtos/how-to-mark-a-conversation-as-answered/README.md index 333b6360..ca7909db 100644 --- a/howtos/how-to-mark-a-conversation-as-answered/README.md +++ b/howtos/how-to-mark-a-conversation-as-answered/README.md @@ -1,7 +1,12 @@ -This is an example project for TalkJS's tutorial on how to mark a conversation as answered. +# How to mark a conversation as answered + +This is an example project for TalkJS's tutorial on [how to mark a conversation as answered](https://talkjs.com/resources/how-to-mark-a-conversation-as-answered/). The project uses TalkJS webhooks to listen for new message events from the TalkJS server, and then calls the REST API to add a custom `answered` field with a value of `true` to conversations where the latest message is from support, and `false` otherwise. It then filters the inbox to only show unanswered messages. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-mark-a-conversation-as-answered.zip) + ## Prerequisites To run this tutorial, you will need: @@ -13,7 +18,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project]((https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-mark-a-conversation-as-answered.zip)). 2. Replace `` and `` in `index.html` and `serer.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard. 4. Add "support" and "customer" roles in the **Roles** tab of the TalkJS dashboard. diff --git a/howtos/how-to-mute-a-conversation/README.md b/howtos/how-to-mute-a-conversation/README.md index f2ed6f1e..1b4986f1 100644 --- a/howtos/how-to-mute-a-conversation/README.md +++ b/howtos/how-to-mute-a-conversation/README.md @@ -1,7 +1,12 @@ +# How to mute a conversation + This is an example project for TalkJS's tutorial on [how to mute a conversation](https://talkjs.com/resources/how-to-mute-a-conversation/). The project uses TalkJS's [custom conversation actions](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to add a new "Mute conversation" option to the chat UI. It then listens for this custom action and calls TalkJS's JavaScript SDK to mute notifications for the conversation. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-mute-a-conversation.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +17,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-mute-a-conversation.zip). 2. Go to the **Roles** tab of your TalkJS dashboard. In the **Custom conversation actions** section of the "default" role settings, add a new custom conversation action with a name of "mute" and a label of "Mute conversation". 3. Replace `` and `` in `index.html` and `script.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 4. Run `npm install` to install dependencies. diff --git a/howtos/how-to-set-an-away-message/README.md b/howtos/how-to-set-an-away-message/README.md index 600c6c97..62804388 100644 --- a/howtos/how-to-set-an-away-message/README.md +++ b/howtos/how-to-set-an-away-message/README.md @@ -1,7 +1,12 @@ -This is an example project for TalkJS's tutorial on how to set an automatic away message outside office hours. +# How to set an automatic away message + +This is an example project for TalkJS's tutorial on [how to set an automatic away message](https://talkjs.com/resources/how-to-set-an-automatic-away-message/) outside office hours. The project uses TalkJS webhooks to listen for new message events from the TalkJS server, and then calls the REST API to reply with a automatic system message when a customer sends a message outside of support hours. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-set-an-away-message.zip) + ## Prerequisites To run this tutorial, you will need: @@ -13,7 +18,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-set-an-away-message.zip). 2. Replace `` and `` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard. 4. Add "support" and "customer" roles in the **Roles** tab of the TalkJS dashboard. diff --git a/howtos/how-to-shard-a-conversation/README.md b/howtos/how-to-shard-a-conversation/README.md index d83e49d7..1ee63ab8 100644 --- a/howtos/how-to-shard-a-conversation/README.md +++ b/howtos/how-to-shard-a-conversation/README.md @@ -1,4 +1,9 @@ -This is an example project for TalkJS's tutorial on how to shard a conversation. +# How to shard a group chat in TalkJS + +This is an example project for TalkJS's tutorial on [how to shard a conversation](https://talkjs.com/resources/how-to-shard-a-group-chat-in-talkjs/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-shard-a-conversation.zip) ## Prerequisites @@ -9,7 +14,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-shard-a-conversation.zip). 2. Replace `` in `index.js` and `` in `seed-users.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Go to your TalkJS dashboard, go to the *Chat UI* tab and set the *team_chat* theme to the default role. 4. Run `npm install` to install dependencies. diff --git a/howtos/how-to-use-custom-data-to-style-your-talkjs-chat/README.md b/howtos/how-to-use-custom-data-to-style-your-talkjs-chat/README.md index 3cc780f5..50a3a659 100644 --- a/howtos/how-to-use-custom-data-to-style-your-talkjs-chat/README.md +++ b/howtos/how-to-use-custom-data-to-style-your-talkjs-chat/README.md @@ -1,9 +1,12 @@ -This is an example project to go with our tutorial on how to use custom data to style your TalkJS chat. +# How to use custom data to style your TalkJS chat - +This is an example project to go with our tutorial on [how to use custom data to style your TalkJS chat](https://talkjs.com/resources/how-to-use-custom-data-to-style-your-talkjs-chat/). This project passes custom data to multiple TalkJS chatboxes. Then, we use the custom data to modify a newly created [TalkJS Theme](https://talkjs.com/docs/Features/Themes/). +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-use-custom-data-to-style-your-talkjs-chat.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,8 +15,8 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download this project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/howtos.how-to-use-custom-data-to-style-your-talkjs-chat.zip). 2. Go to `index.js`, and replace with your app ID from the TalkJS dashboard. 3. Go to your TalkJS dashboard and navigate to the **Themes** tab. Create a new theme called "customDataToTheme" based on the "default" theme. The project adds the default role to all users in the chat. -4. Edit the theme as per the instructions in the article. +4. Edit the theme as per the instructions in the [tutorial](https://talkjs.com/resources/how-to-use-custom-data-to-style-your-talkjs-chat/). 5. Run the HTML file by opening it in your browser. \ No newline at end of file diff --git a/java/spring-boot/README.md b/java/spring-boot/README.md index 1f734ba6..d73a0adb 100644 --- a/java/spring-boot/README.md +++ b/java/spring-boot/README.md @@ -7,6 +7,9 @@ This example demonstrates how to integrate TalkJS with a Java application that u - The `SpringBootTalkJS` project contains the Spring Boot backend, which serves a REST endpoint with user data. - The `talkjs-springboot-frontend` project contains the frontend code, which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/) to create chats between users. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/java.spring-boot.zip) + ## Prerequisites To run this tutorial, you will need: @@ -17,7 +20,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/java.spring-boot.zip). 1. From the `SpringBootTalkJS` directory: 1. Run `mvn clean install` to build the project 1. Run `mvn spring-boot:run` to run the project @@ -49,4 +52,4 @@ To run this tutorial, you will need: 1. From the `talkjs-springboot-frontend` directory: 1. Replace `` in `script.js` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). - 1. Open `index.html` from a browser, or through an extension like VS Code's Live Server, to view the app + 1. Open `index.html` from a browser, or through an extension like VS Code's Live Server, to view the app. diff --git a/nodejs/basic-example/README.md b/nodejs/basic-example/README.md index 9c18494b..429c49a8 100644 --- a/nodejs/basic-example/README.md +++ b/nodejs/basic-example/README.md @@ -7,6 +7,9 @@ This example demonstrates how to integrate TalkJS with an application that has a - The `talkjs-backend` project contains the Node.js backend, which uses serves a REST endpoint with user data. - The `talkjs-frontend` project contains the frontend code, which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/) to create chats between users. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/nodejs.basic-example.zip) + ## Prerequisites To run this tutorial, you will need: @@ -16,7 +19,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/nodejs.basic-example.zip). 1. From the `talkjs-backend` directory: 1. Run `npm install` to build the project diff --git a/php/laravel-integration/README.md b/php/laravel-integration/README.md index 8427ecc7..c152a4b8 100644 --- a/php/laravel-integration/README.md +++ b/php/laravel-integration/README.md @@ -1,56 +1,43 @@ -# Laravel TalkJS Integration +# Laravel and TalkJS example This repository demonstrates how to integrate TalkJS chat into a Laravel application, enabling real-time communication between users. See our [How to add chat to a Laravel app with TalkJS](https://talkjs.com/resources/how-to-add-chat-to-a-laravel-app-with-talkjs/) tutorial for more details. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/php.laravel-integration.zip) + ## Prerequisites -Before getting started, make sure you have the following installed: +Before getting started, make sure you have the following ready or installed: - **Composer:** Required for installing Laravel dependencies. [Install Composer](https://getcomposer.org/download/) - - **Laravel:** If not, install it with Composer: ```bash composer create-project --prefer-dist laravel/laravel your-project-name cd your-project-name - **Node.js and NPM:** Required for Laravel Mix. [Install Node.js and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) - -- **TalkJS Account:** Sign up for a TalkJS account at https://talkjs.com/ to obtain your App ID. - +- **TalkJS account:** Sign up for a TalkJS account at https://talkjs.com/ to obtain your App ID. - **Use APP_ID:** Replace the placeholder `` in `resources/views/chat.blade.php` with your App ID. ## Installation - -### Clone the repository: - -```bash -git clone https://github.com/your-username/talkjs-laravel.git -cd talkjs-laravel -``` - -### Install dependencies: -```bash -composer install -npm install -``` - -### Setup your environment: - -- Copy the `.env.example` file to `.env` and configure your database. -- Run migrations: +1. Clone or [download this project]((https://github.com/talkjs/talkjs-examples/releases/latest/download/php.laravel-integration.zip)). +2. Install dependencies: ```bash - php artisan migrate + composer install + npm install ``` - -### Compile assets: +3. Set up your environment: + - Copy the `.env.example` file to `.env` and configure your database. + - Run migrations: + ```bash + php artisan migrate + ``` +4. Compile assets: ```bash npm run dev ``` -### Serve the application: +5. Serve the application: ```bash php artisan serve ``` -### Visit your application: -- Open your browser and visit http://127.0.0.1:8000. You should see the Laravel welcome page. - -### Integration steps -- Follow the steps outlined in the Tutorial to integrate TalkJS chat into your Laravel application. +6. Open your browser and visit http://127.0.0.1:8000. You should see the Laravel welcome page. +7. Follow the steps outlined in the [tutorial]((https://talkjs.com/resources/how-to-add-chat-to-a-laravel-app-with-talkjs/)) to integrate TalkJS chat into your Laravel application. diff --git a/react-native/basic-example/README.md b/react-native/basic-example/README.md index 3f6039da..461f9baf 100644 --- a/react-native/basic-example/README.md +++ b/react-native/basic-example/README.md @@ -4,3 +4,6 @@ The examples in this directory demonstrate how to use TalkJS with React Native t - [ReactNavigationExample](./ReactNavigationExample/) uses the [React Navigation](https://reactnavigation.org/docs/getting-started/) library to navigate between screens - [ReactNativeNavigationExample](./ReactNativeNavigationExample/) uses the [React Native Navigation](https://wix.github.io/react-native-navigation/docs/before-you-start/) library + +> [!TIP] +> [Download these example projects as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/react-native.basic-example.zip) diff --git a/react/basic-example/README.md b/react/basic-example/README.md index 39a061cc..f7bbd07e 100644 --- a/react/basic-example/README.md +++ b/react/basic-example/README.md @@ -1,5 +1,10 @@ +# TalkJS and React example + This is a basic example that demonstrates how to integrate TalkJS into a React app with our [React SDK](https://talkjs.com/docs/Reference/React_SDK/Installation/), bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.basic-example.zip) + ## Prerequisites To run this tutorial, you will need: @@ -10,7 +15,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.basic-example.zip). 2. Replace `` in `Chat.js` with the value found in your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Run `npm install` to install dependencies. 4. Run `npm start` to start the webhooks server. diff --git a/react/linkedin-like-app/README.md b/react/linkedin-like-app/README.md index 5a9021b4..499340df 100644 --- a/react/linkedin-like-app/README.md +++ b/react/linkedin-like-app/README.md @@ -1,28 +1,29 @@ -# LinkedIn-like Messaging App with React and TalkJS +# LinkedIn-like messaging app with React and TalkJS -### Context This directory contains an files for an application that emulates the messaging part of LinkedIn. It serves to show how Chat can be integrated into an application using TalkJS. The app consists three parts: -
    -
  • Login: This is the entry point of the app, where the basic data of the current user is collected
    • -
  • My Network: This is similar to the "My Network" of LinkedIn. It displays a list of users. Each user has a "Message" button which you can use to start a conversation with the user. On click of the "Message button", a chatbox pops up to the right of the screen just like it is on LinkedIn
    • -
  • Messaging: This is similar to the Messaging part of the LinkedIn app. All conversations a user has with other users appear here.
    • -
+- **Login:** This is the entry point of the app, where the basic data of the current user is collected +- **My Network:** This is similar to the "My Network" of LinkedIn. It displays a list of users. Each user has a "Message" button which you can use to start a conversation with the user. On click of the "Message button", a chatbox pops up to the right of the screen just like it is on LinkedIn +- **Messaging:** This is similar to the Messaging part of the LinkedIn app. All conversations a user has with other users appear here. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.linkedin-like-app.zip) + +## Requirements -### Requirements To get this app running on your system, ensure that you are working with Node >= version 6 and npm >= version 5.2. -### Getting Started +## Getting started + Here are the steps to get this app running on your system. -
    -
  1. Clone or download this app
    2. -
  2. Run `npm install`
    3. -
  3. In the `Messaging.js` file, replace "MY_APP_ID" on line 30 with your APP ID gotten from your TalkJS dashboard at at https://talkjs.com/dashboard/login. Do the same thing in the `MyNetwork.js` file on line 25.
    4. -
  4. Run `npm start`
    5. -
- -### More Information -For more information on how to integrate TalkJS into your projects, check out our [documentation](https://talkjs.com/docs). +- Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.linkedin-like-app.zip). +- Run `npm install`. +- In the `Messaging.js` file, replace "MY_APP_ID" on line 30 with your app ID from the **Settings** page of your TalkJS dashboard at https://talkjs.com/dashboard/login. Do the same thing in the `MyNetwork.js` file on line 25. +- Run `npm start`. + +### More information + +For more information on how to integrate TalkJS into your projects, check out the [TalkJS documentation](https://talkjs.com/docs). diff --git a/react/marketplace/README.md b/react/marketplace/README.md index 758b2861..cda9986e 100644 --- a/react/marketplace/README.md +++ b/react/marketplace/README.md @@ -1,24 +1,23 @@ # Buyer-seller chat in React with TalkJS -## Context This directory contains two buyer-seller marketplace applications: one with and one without chat functionality. -The application without chat functionality serves as a start application for the TalkJS implementation [tutorial](https://talkjs.com/tutorials/article/add-buyer-seller-chat-into-a-marketplace-with-react/), in which chat functionalities are being added within a project. The final product of the tutorial is the marketplace application with chat functionality. +The application without chat functionality serves as a start application for the TalkJS implementation tutorial [Add buyer-seller chat into a marketplace with React]](https://talkjs.com/tutorials/article/add-buyer-seller-chat-into-a-marketplace-with-react/), in which chat functionalities are being added within a project. The final product of the tutorial is the marketplace application with chat functionality. The applications both realize a simplified use case of a marketplace. In this marketplace, users are able to log in, view product listings and chat with the vendor of a product in several different ways (obviously, the chat functionalities are only implemented in the application with chat functionalities). Both applications have been built in React, with Redux and by using the Container Pattern and TypeScript. -## First things first +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.marketplace.zip) -### React version -This application has been written in React version 16.5.2. -Make sure to run this application with the aforementioned React version or above to assure it'll function as intended. +## Requirements -### NodeJS version -Make sure you're working with NodeJS v8.11.4 or above. +- **React version:** This application has been written in React version 16.5.2. Make sure to run this application with the aforementioned React version or above to assure it'll function as intended. +- **NodeJS version:** Make sure you're working with NodeJS v8.11.4 or above. ## Getting started + The following steps should be executed in either the ```marketplace``` or ```marketplace-with-chat``` directory. - Install all the needed modules by using ```npm install``` @@ -28,12 +27,14 @@ The following steps should be executed in either the ```marketplace``` or ```mar - Log into the application. More information about logging in can be found in the next chapter. ## How to log in + You can use any mock-user's username to log into any of the applications. The mock-users can be found in the following location: ``` src/core/mocks/users.mock.ts ``` ## Chat-related files + The following files are all the files in the marketplace application that contain any code regarding the chat implementation: ``` src/index.tsx @@ -52,4 +53,5 @@ src/shared/utils/talk.util.ts ``` ## Documentation -For more information on how to integrate TalkJS into your projects, check out our [documentation](https://talkjs.com/docs/?ref=gh-example-readme). + +For more information on how to integrate TalkJS into your projects, check out the [documentation](https://talkjs.com/docs/?ref=gh-example-readme). diff --git a/react/next.js/README.md b/react/next.js/README.md index 3bf2b1de..b2451ba7 100644 --- a/react/next.js/README.md +++ b/react/next.js/README.md @@ -1,9 +1,12 @@ -# Next.js example +# Next.js and TalkJS example This is a minimal example that demonstrates how to integrate TalkJS into a Next.js project using our [React SDK](https://talkjs.com/docs/Reference/React_SDK/Installation/). The React SDK is not able to render components on the server, so we use Next.js's [Client Components](https://nextjs.org/docs/app/building-your-application/rendering/client-components) to render them on the client. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.next.js.zip) + ## Prerequisites To run this tutorial, you will need: @@ -14,11 +17,10 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. -2. Copy `.env.example` to a new `.env` file. -3. Replace `` in `.env` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). -4. Run `npm install` to install dependencies. -5. Run `npm run dev` to start the server. -6. Visit . +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.next.js.zip). +2. Replace `` in `app/page.js` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). +3. Run `npm install` to install dependencies. +4. Run `npm run dev` to start the server. +5. Visit . You should see a page which loads a chatbox on startup. diff --git a/react/remote-work-demo/README.md b/react/remote-work-demo/README.md index 12153a70..d2d47791 100644 --- a/react/remote-work-demo/README.md +++ b/react/remote-work-demo/README.md @@ -2,18 +2,16 @@ This example shows you how to use React and TalkJS to create a team chat with channels (like Slack or Teams). It's similar to the [remote work demo](https://talkjs.com/demo/team-chat/) that you can try on our website. See our [How to use TalkJS to create a team chat with channels](https://talkjs.com/resources/how-to-use-talkjs-to-create-a-team-chat-with-channels/) tutorial for more details. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.remote-work-demo.zip) + ## Instructions -1. Clone the repo. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.remote-work-demo.zip). 2. Install dependencies by either running `npm install` or `yarn`. - -3. Create a TalkJS account. - -4. Grab your App ID, which you can find in your dashboard. - -5. In `talkjsConfig.js`, replace `appId` with your App ID. - -6. From this point on, you're ready to start up the app using using either `npm run` or `yarn start`. The app will be up and running at localhost:3000. +3. Create a [TalkJS account](https://talkjs.com/dashboard/signup/). +4. In `talkjsConfig.js`, replace `appId` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/). +5. From this point on, you're ready to start up the app using using either `npm run` or `yarn start`. The app will be up and running at localhost:3000. The app is prepopulated with a default user and a couple of hardcoded conversations, which easily can be replaced with your own users and conversations. You can find these conversations and the default `userId` in `src/talkJsConfig.js` as well. diff --git a/react/team-chat-with-threads/README.md b/react/team-chat-with-threads/README.md index 9e1685a1..57dcbdbf 100644 --- a/react/team-chat-with-threads/README.md +++ b/react/team-chat-with-threads/README.md @@ -4,6 +4,9 @@ This example extends our [team chat with channels example](https://github.com/ta See our [How to add reply threads to your TalkJS team chat](https://talkjs.com/resources/how-to-add-threads-to-your-team-chat-with-talkjs/) tutorial for more details. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.team-chat-with-threads.zip) + ## Prerequisites To run this tutorial, you will need: @@ -15,7 +18,7 @@ To run this tutorial, you will need: ## Instructions -1. Clone or download the project +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/react.team-chat-with-threads.zip). 1. Start ngrok with `ngrok http 3001`. You should see a forwarding URL which is something like `https://.ngrok-free.app` 1. In the TalkJS dashboard: 1. In the **Themes** tab, select to **Edit** the `team_chat` theme and replace the `UserMessage` template with the version in `theme/UserMessage.txt`. diff --git a/rest-api/anonymizing-user/README.md b/rest-api/anonymizing-user/README.md index e09e859b..c6831290 100644 --- a/rest-api/anonymizing-user/README.md +++ b/rest-api/anonymizing-user/README.md @@ -1,12 +1,15 @@ -# Anonymize/delete user data +# Anonymize or delete user data -This example shows how you can anonymize/delete information about users and their conversations. The script does not remove the user associated with the given appId from the TalkJS database, but makes sure that the user cannot be recognized anymore, neither by name nor by messages sent by that user. +This example shows how you can anonymize or delete information about users and their conversations. The script does not remove the user associated with the given app ID from the TalkJS database, but makes sure that the user cannot be recognized anymore, neither by name nor by messages sent by that user. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.anonymizing-user.zip) ## Usage This example contains a TypeScript version and a JavaScript version of the same script. In order to use it, first edit data inside the script: -- `appId` and `secretKey`, both can be found in the TalkJS Dashboard +- `appId` and `secretKey`, both can be found in the [TalkJS dashboard](https://talkjs.com/dashboard/) - `userId` - `cleanupOnlyUsersMessages` - if set to true, only messages sent by that user will be anonymized. This setting is useful when the conversation is important and needs to be inspected in the future. - `cleanupConverstions` - clears conversation metadata such as `photoUrl` and `custom` if set to true. diff --git a/rest-api/edit-conversation-image-title/README.md b/rest-api/edit-conversation-image-title/README.md index b785f435..59267c1f 100644 --- a/rest-api/edit-conversation-image-title/README.md +++ b/rest-api/edit-conversation-image-title/README.md @@ -1,8 +1,12 @@ -This is an example project to go with our tutorial on How to edit the title and image of your TalkJS Conversation. - +# How to edit the title and image of your TalkJS conversation + +This is an example project to go with our tutorial on [How to edit the title and image of your TalkJS Conversation](https://talkjs.com/resources/how-to-change-the-title-and-image-of-a-talkjs-conversation/). The project uses TalkJS's [conversation actions](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to add a custom action to the conversation that lets users edit the title or image of group conversations. The action is hooked to a backend server that calls the TalkJS REST API to update the conversation object. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.edit-conversation-image-title.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +16,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download this project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.edit-conversation-image-title.zip). 2. Rename the `.env_new` file to `.env` and paste your TalkJS appID and secret key. You can find both of these on your TalkJS dashboard. 3. Go to your TalkJS dashboard and navigate to the Roles tab. Select the “default” role and go down to the Custom conversation actions section. Add a new action and name it “editTitleOrImage” with the label “Edit title or image”. Don’t forget to click Save all roles to persist your changes. 4. Go to the `server` folder and run `npm install` followed by `npm start`. This installs all the required dependencies and starts the NodeJS server. diff --git a/rest-api/export-data/README.md b/rest-api/export-data/README.md index 7712d018..fd3e77a0 100644 --- a/rest-api/export-data/README.md +++ b/rest-api/export-data/README.md @@ -1,6 +1,9 @@ # Export TalkJS data -This example shows how you can export all your data from TalkJS using NodeJS. +This example shows how you can export all your data from TalkJS using NodeJS. For more explanation, see the tutorial [How to export chat messages from TalkJS](https://talkjs.com/resources/export-chat-messages-api/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.export-data.zip) ## Usage diff --git a/rest-api/migrate-data-from-sendbird-to-talkjs/README.md b/rest-api/migrate-data-from-sendbird-to-talkjs/README.md new file mode 100644 index 00000000..bde6f3a8 --- /dev/null +++ b/rest-api/migrate-data-from-sendbird-to-talkjs/README.md @@ -0,0 +1,6 @@ +# How to migrate from Sendbird to TalkJS example + +This example project accompanies the tutorial [How to migrate from Sendbird to TalkJS](https://talkjs.com/resources/how-to-migrate-data-from-sendbird-to-talkjs/). + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.migrate-data-from-sendbird-to-talkjs.zip) diff --git a/rest-api/talkjs-html-panels-advanced/README.md b/rest-api/talkjs-html-panels-advanced/README.md new file mode 100644 index 00000000..bb480fff --- /dev/null +++ b/rest-api/talkjs-html-panels-advanced/README.md @@ -0,0 +1,6 @@ +# Advanced HTML panels example + +This project provides an example of the advanced use of HTML panels in TalkJS. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.talkjs-html-panels-advanced.zip) diff --git a/rest-api/talkjs-zoom-integration/README.md b/rest-api/talkjs-zoom-integration/README.md index ebe5f217..6eed6eb4 100644 --- a/rest-api/talkjs-zoom-integration/README.md +++ b/rest-api/talkjs-zoom-integration/README.md @@ -1,7 +1,12 @@ +# How to create Zoom meetings directly from your TalkJS chat + This is an example project to go with our tutorial on [How to create Zoom meetings directly from your TalkJS chat](https://talkjs.com/resources/how-to-create-zoom-meetings-in-talkjs/). The project uses TalkJS's [custom headers](https://talkjs.com/docs/Features/Customizations/Creating_Custom_Headers/) to add a new header with a button to start Zoom meetings from the chat. The button is hooked to a backend server that calls the Zoom API to create a meeting and also sends a message to the chat with the details of the meeting. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.talkjs-zoom-integration.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +17,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download this project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/rest-api.talkjs-zoom-integration.zip). 2. Replace `` in `server/server.js` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Follow the instructions in the [tutorial](https://talkjs.com/resources/how-to-create-zoom-meetings-in-talkjs/) to set up your Zoom app and add the credentials to a `.env` file. 4. Follow the instructions in the tutorial to update your TalkJS theme. diff --git a/ruby/README.md b/ruby/README.md index b775e7fa..9b49b7b2 100644 --- a/ruby/README.md +++ b/ruby/README.md @@ -1,5 +1,5 @@ # Ruby examples -The examples in this directory demonstrate how to use TalkJS with Django. +The examples in this directory demonstrate how to use TalkJS with Ruby. To get started, try our [`rails-talkjs` example](./rails-talkjs/). \ No newline at end of file diff --git a/ruby/rails-talkjs/README.md b/ruby/rails-talkjs/README.md index ee7352c3..f5e513ae 100644 --- a/ruby/rails-talkjs/README.md +++ b/ruby/rails-talkjs/README.md @@ -1,7 +1,10 @@ -# TalkJS and Rails example +# Rails and TalkJS example This is an example project for TalkJS's tutorial on [how to build a Rails chat app with TalkJS](https://talkjs.com/resources/how-to-add-chat-to-a-rails-app-with-talkjs/). This example demonstrates how to integrate TalkJS with a Ruby application that uses the Rails framework. +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/ruby.rails-talkjs.zip) + ## Prerequisites To run this tutorial, you will need: @@ -11,7 +14,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/ruby.rails-talkjs.zip). 2. Replace `` in `rails-talkjs/app/javascript/conversation.js` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Install Rails: diff --git a/svelte/svelte/README.md b/svelte/svelte/README.md index 5efd3b99..f0355d7b 100644 --- a/svelte/svelte/README.md +++ b/svelte/svelte/README.md @@ -1,7 +1,10 @@ -# TalkJS Svelte Example +# TalkJS and Svelte example This example shows how to integrate TalkJS with Svelte in the simplest way. For a more idiomatic Svelte integration that minimises use of `onMount`, see `sveltekit-typescript-wrapper`. Open `/src/talkJsConfig.js` and replace `YOUR_APP_ID` with your own appId which you can find in the [TalkJS Dashboard](https://talkjs.com/dashboard) -Run `npm install && npm run dev` to start the example on port 5000. \ No newline at end of file +Run `npm install && npm run dev` to start the example on port 5000. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/svelte.svelte.zip) diff --git a/svelte/sveltekit-typescript-wrapper/README.md b/svelte/sveltekit-typescript-wrapper/README.md index a9a74ec6..3375d1f6 100644 --- a/svelte/sveltekit-typescript-wrapper/README.md +++ b/svelte/sveltekit-typescript-wrapper/README.md @@ -1,4 +1,4 @@ -# TalkJS SvelteKit + TS + Wrapper Example +# TalkJS and SvelteKit + TS + wrapper example This example shows how to integrate TalkJS with SvelteKit (using TypeScript), with a wrapper component - ``. @@ -17,3 +17,6 @@ Inside the `MyChatInterface` component, you can assume that TalkJS is loaded and Open `/src/lib/talkJsConfig.ts` and replace `YOUR_APP_ID` with your own appId which you can find in the [TalkJS Dashboard](https://talkjs.com/dashboard) Run `npm install && npm run dev` to start the example on port 5000. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/svelte.sveltekit-typescript-wrapper.zip) diff --git a/svelte/sveltekit/README.md b/svelte/sveltekit/README.md index 2ce46217..004b8c41 100644 --- a/svelte/sveltekit/README.md +++ b/svelte/sveltekit/README.md @@ -1,7 +1,10 @@ -# TalkJS SvelteKit Example +# TalkJS and SvelteKit example This example shows how to integrate TalkJS with SvelteKit in the simplest way. For a more idiomatic Svelte integration that minimises use of `onMount`, see `sveltekit-typescript-wrapper`. Open `/src/lib/talkJsConfig.js` and replace `YOUR_APP_ID` with your own appId which you can find in the [TalkJS Dashboard](https://talkjs.com/dashboard) Run `npm install && npm run dev` to start the example. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/svelte.sveltekit.zip) diff --git a/vue/vue-getting-started/README.md b/vue/vue-getting-started/README.md index 17aa8154..837fbf15 100644 --- a/vue/vue-getting-started/README.md +++ b/vue/vue-getting-started/README.md @@ -2,6 +2,9 @@ This is the example code for the [Vue getting started guide](https://talkjs.com/docs/Getting_Started/Frameworks/Vue/). +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/vue.vue-getting-started.zip) + ## Prerequisites To run this tutorial, you will need: @@ -12,7 +15,7 @@ To run this tutorial, you will need: ## How to run the tutorial -1. Clone or download the project. +1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/vue.vue-getting-started.zip). 2. Replace `` in `src/components/Chat.vue` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 3. Run `npm install` to install dependencies. 4. Run `npm run dev` to start the server. diff --git a/webhooks/nodejs/express-webhook/README.md b/webhooks/nodejs/express-webhook/README.md index cee70d73..02172ae3 100644 --- a/webhooks/nodejs/express-webhook/README.md +++ b/webhooks/nodejs/express-webhook/README.md @@ -1,6 +1,10 @@ -# Webhooks example (node.js) +# Webhooks example (Node.js) + This example demonstrates how the [webhooks feature](https://talkjs.com/docs/Reference/Webhooks.html) can be used so that additional functionality can be added to your TalkJS enabled applications. For more information check out [TalkJS.com](https://talkjs.com/) or [get in touch](https://talkjs.com?chat). +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/webhooks.nodejs.zip) + ## Installation First start by cloning the example repository and changing the working directory to the project folder: @@ -13,7 +17,8 @@ And lastly, install the required npm packages: npm install ## Initial setup -The example requires you to set your application ID in the a `.env` file. Visit the [TalkJS dashboard](https://talkjs.com/dashboard/) and copy your development `appId` to the `example.env` file and then rename the file to '`.env`'. + +The example requires you to set your application ID in an `.env` file. Visit the [TalkJS dashboard](https://talkjs.com/dashboard/) and copy your development `appId` to the `example.env` file and then rename the file to '`.env`'. Additionally, a secret key must be set to allow TalkJS's [identity verification](https://talkjs.com/docs/Features/Identity_Verification.html) and [webhook integrity](https://talkjs.com/docs/Features/Security_Settings/Security_Recommendations.html#page_Webhook_Integrity) features to work. @@ -33,44 +38,43 @@ Once the example has been installed and configured the application can be starte You should see something similar to this in the console: - + ![console view](https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2Fd919b03062514e8b99ceb9f7d4286aae%2Fconsole.png?alt=media) Once the application has started, copy the `Webhook URL` to the webhook setting in your TalkJS [dashboard](https://talkjs.com/dashboard/). - The application should now be temporarily accessible online by using [ngrok](https://ngrok.com/), a tool used to temporarily create a tunnel between your local development app and a public URL so that TalkJS can send the webhook events to your local development environment. ## Features **Inspect requests** that are sent to the demo webhook endpoint by opening the Ngrok inspector (http://127.0.0.1:4040) once the application has started. + + ![Ngrok inspector](https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2F20ec0a898fe845d4b3326d49ac942fac%2Fngrok.png?alt=media) **Trigger events using the demo UI** - The example has a demo chat application to easily trigger events such as `user.created`, `message.send` and `message.read`. + + ![Demo UI example](https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2F8bd6d9e3d4604becb1fcdb7406e0c872%2Fdual.gif?alt=media) **Easily prototype event handlers** - Event handlers can easily be prototyped, triggered and testing all without restarting the server due to live-reloading. A list of all the event handlers can be found on the [webhooks section](https://talkjs.com/docs/Webhooks/Getting_Started.html) of the documentation -## App Strcture -Important files -`./app.js` - The main application file which initiates express and sets the route-handlers and a middleware. +## App structure -`./routes/` - Contains two files used to seperate the routes from the main app.js. +Important files: -`./controllers/` - There are two controllers, one to handle the webhooks and one to display the demo chat UI. - -`./models` - Contains a single mock User model - -`.env` - Used to store environment variables for the demo application - -`./bin/www` - Used to start the express.js server - -`./bin/ngrok` - Used to create an Ngrok tunnel between the demo app and the internet - -`./views` - Contains two views using the handlebars view engine: -* `chat.hbs` - A single inbox view with the option to swap to another User's inbox (to trigger read notifications etc.) -* `dual-chat.hbs` - Contains two inbx UI's, with different users for each one. This helps to demonstrate the real-time nature of TalkJS +- `./app.js` - The main application file which initiates express and sets the route-handlers and a middleware. +- `./routes/` - Contains two files used to seperate the routes from the main app.js. +- `./controllers/` - There are two controllers, one to handle the webhooks and one to display the demo chat UI. +- `./models` - Contains a single mock User model +- `.env` - Used to store environment variables for the demo application +- `./bin/www` - Used to start the express.js server +- `./bin/ngrok` - Used to create an Ngrok tunnel between the demo app and the internet +- `./views` - Contains two views using the handlebars view engine: +- `chat.hbs` - A single inbox view with the option to swap to another User's inbox (to trigger read notifications etc.) +- `dual-chat.hbs` - Contains two inbx UI's, with different users for each one. This helps to demonstrate the real-time nature of TalkJS ## Need help? -If you need help, check out the TalkJS [documentation](https://talkjs.com/docs/) or feel free to [talk with us](https://talkjs.com/?chat) or send us an [email](mailto:hey@talkjs.com). + +If you need help, check out the TalkJS [documentation](https://talkjs.com/docs/) or feel free to [chat with us](https://talkjs.com/?chat). diff --git a/webhooks/php/README.md b/webhooks/php/README.md new file mode 100644 index 00000000..bef88f8e --- /dev/null +++ b/webhooks/php/README.md @@ -0,0 +1,6 @@ +# Webhooks PHP example + +This provides a basic PHP example of how to receive webhook requests and validate the signature, so that you can be certain that the request was sent by TalkJS. + +> [!TIP] +> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/webhooks.php.zip)