[{"data":1,"prerenderedAt":50},["Reactive",2],{"featurePages":3,"blogPosts-implementing-deep-linking-in-react-native":4},[],{"slug":5,"id":6,"uuid":7,"title":8,"html":9,"comment_id":6,"feature_image":10,"featured":11,"visibility":12,"created_at":13,"updated_at":14,"published_at":15,"custom_excerpt":16,"codeinjection_head":17,"codeinjection_foot":17,"custom_template":17,"canonical_url":18,"authors":19,"tags":31,"primary_author":45,"primary_tag":46,"url":47,"excerpt":16,"reading_time":48,"access":49,"comments":11,"og_image":17,"og_title":17,"og_description":17,"twitter_image":17,"twitter_title":17,"twitter_description":17,"meta_title":8,"meta_description":17,"email_subject":17,"frontmatter":17,"feature_image_alt":17,"feature_image_caption":17},"implementing-deep-linking-in-react-native","610cd502b9956c0555c7f7a9","d45f93ca-ff1d-4e65-ae6b-88e9bb4fd8cb","Implementing Deep linking in React native mobile apps","\u003Cp>\u003Cem>Learnings from implementing Deep linking in Chatwoot mobile apps\u003C/em>\u003C/p>\u003Cp>We live in a world where things are interlinked. We share links more frequently than ever before and want our customers to reach their desired pages swiftly, regardless of their platforms. Deep links could help significantly in enhancing this experience.\u003C/p>\u003Ch2 id=\"what-is-deep-linking\">What is deep linking?\u003C/h2>\u003Cp>Deep linking enables a user to navigate to specific content in a mobile application using a URL.\u003C/p>\u003Cp>Deep links are web links that can activate your app and contain information needed to load specific app sections. They can be used as triggers in external events like \u003Cem>push notification, emails, web links etc.\u003C/em>\u003C/p>\u003Cp>They enable users to save more time and energy without locating a particular page by themselves – significantly improving the user experience.\u003C/p>\u003Cp>Note: The \"deep\" refers to the depth of the page in a hierarchical app structure of pages.\u003C/p>\u003Ch2 id=\"why-deep-linking\">Why deep linking?\u003C/h2>\u003Cp>Deeplinking enhances the user experience for mobile app users. Before implementing Deep linking In Chatwoot, a user on a mobile device clicking on a conversation link received via an email would be taken to the web browser, even if they have the Chatwoot app installed.\u003C/p>\u003Cp>With deep linking, the Chatwoot app can open the conversation screen based on the id in the URL. Then, when the user clicks on a link, it will open the app, and the user is navigated to the exact point in the app where they are destined. This is a much better user experience.\u003C/p>\u003Cfigure class=\"kg-card kg-image-card\">\u003Cimg src=\"https://www-internal-blog.chatwoot.com/content/images/2022/09/deeplinking-demo.gif\" class=\"kg-image\" alt loading=\"lazy\" width=\"600\" height=\"1299\" srcset=\"https://www-internal-blog.chatwoot.com/content/images/2022/09/deeplinking-demo.gif 600w\">\u003C/figure>\u003Ch2 id=\"how-to-implement-deep-linking\">How to implement Deep Linking?\u003C/h2>\u003Cp>Deep links can be implemented in ios and android by the following methods :\u003C/p>\u003Cul>\u003Cli>Custom URL scheme (iOS Universal Links)\u003C/li>\u003Cli>Intent URL (Android)\u003C/li>\u003C/ul>\u003Ch2 id=\"configuration-for-android\">Configuration for Android\u003C/h2>\u003Cp>Add an \u003Ca target=\"_blank\" rel=\"noopener\" href=\"https://developer.android.com/guide/components/intents-filters?ref=www-internal-blog.chatwoot.com\">intent-filter\u003C/a> in AndroidManifest.xml to specify the host link\u003C/p>\u003Cpre>\u003Ccode><data android:scheme=\"https\" android:host=\"http://app.chatwoot.com/\" />\n\u003C/code>\u003C/pre>\u003Cp>Then build the project. To test this action, run the following command in your terminal.\u003C/p>\u003Cpre>\u003Ccode class=\"language-bash\">adb shell am start -W -a android.intent.action.VIEW -d \"https://app.chatwoot.com/app/accounts/1/conversations/12121\" com.chatwoot.app\n\u003C/code>\u003C/pre>\u003Cp>Now the app will open up successfully if everything went well.\u003C/p>\u003Ch2 id=\"configuration-for-ios\">Configuration for iOS\u003C/h2>\u003Cp>Apple recommends Universal links as the way to open your web links in your mobile app.\u003C/p>\u003Cp>To support universal linking in iOS, we need to add some configuration on the server-side as well. First, the endpoint must use HTTPS.\u003C/p>\u003Cp>Your server has to have a route that is defined as a get request with the path \u003Cstrong>/apple-app-site-association.\u003C/strong>. When a request is made to that path, you must return a file with the configuration recommended below.\u003C/p>\u003Cpre>\u003Ccode>{\n    \"applinks\": {\n        \"apps\": [],\n        \"details\": [\n            {\n                \"appID\": \"<TeamID>.<Bundle-Identifier>\",\n                \"paths\": [ \"NOT /super_admin/*\", \"*\" ]\n            }\n        ]\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"implementation-on-the-server-side\">Implementation on the server-side\u003C/h2>\u003Cp>Apart from the configurations required in your mobile app, you would also need to implement some changes on your server for deep links to work for ios.\u003C/p>\u003Cp>Here is an example implementation for a ruby on rails server.\u003C/p>\u003Cp>\u003Cstrong>routes.rb\u003C/strong>\u003C/p>\u003Cpre>\u003Ccode class=\"language-ruby\">get 'apple-app-site-association' => 'apple_app#site_association'\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>app/controllers/apple_controller.rb\u003C/strong>\u003C/p>\u003Cpre>\u003Ccode class=\"language-ruby\">class AppleController < ApplicationController\n  def site_association\n    site_association_json = render_to_string action: 'site_association', layout: false\n    send_data site_association_json, filename: 'apple-app-site-association', type: 'application/json'\n  end\nend\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>app/views/apple\u003Cem>app/site\u003C/em>association.html.erb\u003C/strong>\u003C/p>\u003Cpre>\u003Ccode class=\"language-ruby\">{\n    \"applinks\": {\n        \"apps\": [],\n        \"details\": [\n            {\n                \"appID\": \"<%= ENV['IOS_APP_ID'] %>\",\n                \"paths\": [ \"NOT /super_admin/*\", \"*\" ]\n            }\n        ]\n    }\n}\n\u003C/code>\u003C/pre>\u003Cp>Find the implementation of Universal links in Chatwoot in this \u003Ca target=\"_blank\" rel=\"noopener\" href=\"https://github.com/chatwoot/chatwoot/pull/805?ref=www-internal-blog.chatwoot.com\">pull request\u003C/a>.\u003C/p>\u003Cp>Once your server endpoint is ready, Launch Xcode. Select the Signing & \u003Cstrong>Capabilities\u003C/strong> tab and then select the enable \u003Cstrong>Associated Domains\u003C/strong> and add domains. Make sure to prefix the domain with \u003Ccode>applinks:\u003C/code> in place of \u003Ccode>https://\u003C/code>\u003C/p>\u003Cfigure class=\"kg-card kg-image-card\">\u003Cimg src=\"https://www.chatwoot.com/static/b85130d2d4fa3ed12bf6372cf618f580/16abd/deeplinking-xcode.png\" class=\"kg-image\" alt=\"deeplinking-xcode\" loading=\"lazy\" title=\"deeplinking-xcode\">\u003C/figure>\u003Cp>Find the implementation of Universal links in Chatwoot mobile app in this \u003Ca target=\"_blank\" rel=\"noopener\" href=\"https://github.com/chatwoot/chatwoot-mobile-app/pull/297?ref=www-internal-blog.chatwoot.com\">pull request\u003C/a>.\u003C/p>\u003Ch2 id=\"final-steps\">Final Steps\u003C/h2>\u003Cp>Once our app is ready to handle deep Links, we need to implement actions to navigate the user to required screens. React native has \u003Ca target=\"_blank\" rel=\"noopener\" href=\"https://reactnative.dev/docs/linking?ref=www-internal-blog.chatwoot.com\">Linking\u003C/a> module, which will provide API that allows us to listen for an incoming linked url.\u003C/p>\u003Cp>Linking gives you a general interface to interact with incoming app links. For example, if an app link triggered the app launch, it provides the link url. Otherwise, it will provide null. If we get the link url, it redirects to the exact screen based on the incoming URL.\u003C/p>\u003Cpre>\u003Ccode class=\"language-javascript\">useEffect(() => {\n // Get the deep link used to open the app\n   const initialUrl = await Linking.getInitialURL();\n // Redirect to particualr screen based on inital url\n   navigation.navigate('ChatScreen');\n}, []);\n\u003C/code>\u003C/pre>\u003Cp>Your mobile app should now be ready to handle deep links if you have followed the above instructions. Thank you for reading, and I hope you liked it. Please let us know if you have any doubts ;)\u003C/p>","https://www-internal-blog.chatwoot.com/content/images/2021/08/deeplinking-banner.png",false,"public","2021-08-06T06:21:54.000+00:00","2022-09-20T09:24:38.000+00:00","2021-07-14T06:22:00.000+00:00","Learnings from implementing Deep linking in Chatwoot mobile apps\nWe live in a world where things are interlinked. We share links more frequently than ever before and want our customers to reach their desired pages...",null,"https://www.chatwoot.com/blog/implementing-deep-linking-in-react-native",[20],{"id":21,"name":22,"slug":23,"profile_image":24,"cover_image":25,"bio":26,"website":27,"location":28,"facebook":17,"twitter":29,"meta_title":17,"meta_description":17,"url":30},"6118d8d14b8f26503f72d51b","Muhsin K","muhsin","https://www-internal-blog.chatwoot.com/content/images/2026/02/CleanShot-2026-02-23-at-12.44.10@2x.png","https://www-internal-blog.chatwoot.com/content/images/2021/08/1500x500.jpeg","Product-minded engineer building across backend, frontend, mobile and AI systems.","https://www.muhsi.me","Bengauluru, India","@muhsin_keloth","https://www-internal-blog.chatwoot.com/author/muhsin/",[32,36],{"id":33,"name":34,"slug":34,"description":17,"feature_image":17,"visibility":12,"og_image":17,"og_title":17,"og_description":17,"twitter_image":17,"twitter_title":17,"twitter_description":17,"meta_title":17,"meta_description":17,"codeinjection_head":17,"codeinjection_foot":17,"canonical_url":17,"accent_color":17,"url":35},"6118da864b8f26503f72d530","blog","https://www-internal-blog.chatwoot.com/tag/blog/",{"id":37,"name":38,"slug":39,"description":40,"feature_image":17,"visibility":12,"og_image":17,"og_title":17,"og_description":17,"twitter_image":17,"twitter_title":17,"twitter_description":17,"meta_title":41,"meta_description":42,"codeinjection_head":17,"codeinjection_foot":17,"canonical_url":43,"accent_color":17,"url":44},"6308cfbf730b190d1c2d7f42","Engineering","engineering","We're always experimenting with new features and complex solutions, as well as improving our existing offerings. Read about how we do it, directly from Chatwoot engineers.","Engineering Blog | Learnings, tips, stories from Chatwoot Engineers","We're always experimenting with new features, & complex solutions, & improving our existing offerings. Read about how we do it – written by our engineers.","https://www.chatwoot.com/tags/engineering","https://www-internal-blog.chatwoot.com/tag/engineering/",{"id":21,"name":22,"slug":23,"profile_image":24,"cover_image":25,"bio":26,"website":27,"location":28,"facebook":17,"twitter":29,"meta_title":17,"meta_description":17,"url":30},{"id":33,"name":34,"slug":34,"description":17,"feature_image":17,"visibility":12,"og_image":17,"og_title":17,"og_description":17,"twitter_image":17,"twitter_title":17,"twitter_description":17,"meta_title":17,"meta_description":17,"codeinjection_head":17,"codeinjection_foot":17,"canonical_url":17,"accent_color":17,"url":35},"https://www-internal-blog.chatwoot.com/implementing-deep-linking-in-react-native/",3,true,1775212115556]