LogoLogo
DocumentationWebsiteCommunityPortal
  • Get Started
    • Quickstart
    • Tutorials
    • Wizards
  • Features
    • Release Notes
      • 2024
        • 04-05 Apr Update
        • 03-27 Mar Update
        • 02-07 Feb Update
        • 01-23 Jan Update
        • 01-05 Jan Update
      • 2023
        • 12-18 Dec Update
        • 11-30 Nov Update
        • 10-30 Oct Update
        • 10-04 Oct Update
        • 09-18 Sep Update
        • 09-11 Sep Update
        • 08-28 Aug Update
        • 08-14 Aug Update
        • 07-23 July Update
        • 07-14 July Update
        • 06-16 June Update
        • 06-6 June Update
        • 05-16 May Update
        • 03-31 Mar Update
        • 03-16 Mar Update
        • 03-10 Mar Update
        • 02-07 Feb Update
        • 01-24 Jan Update
        • 01-10 Jan Update
      • 2022
        • 12-08 Dec Update
        • 11-13 Nov Update
        • 11-07 Nov Update
        • 10-26 Oct Update
        • 10-14 Oct Update
        • 10-01 Oct Update
        • 08-26 Aug Update
        • 08-02 Aug Update
        • 07-01 July Update
        • 06-08 June Update
        • 05-20 May Update
        • 05-05 May Update
        • 04-25 Apr Update
        • 02-11 Feb Update
        • 01-28 Jan Update
        • 01-10 Jan Update
      • 2021
        • 12-10 Dec Update
        • 12-01 Dec Update
        • 11-26 Nov Update
        • 11-17 Nov Update
        • 11-12 Nov Update
        • 11-09 Nov Update
        • 11-02 Nov Update
        • 10-26 Oct Update
        • 10-21 Oct Update
        • 10-14 Oct Update
        • 09-27 Sep Update
        • 08-31 Aug Update
        • 07-20 July Update
        • 07-02 July Update
        • 06-31 June Update
  • Metaverse
    • Building
      • Portal
        • Team Members
        • Defining Global Variables
      • Editor
        • File Manager
          • Selecting a file
          • Sketchfab Integration
        • Placement in 3D Space
        • Project Settings
          • Preferences
          • Branding
          • Collaborators
          • Menu
          • Variables in Settings
          • Lead Generation
          • Tour Mode
          • Advanced
          • E-Commerce in Settings
        • Preview
          • Headset Testing - WebXR Emulator
        • Viewport Properties
        • Editor Keyboard Shortcuts
      • Scenes
        • 3D Scene
          • Avatar System
          • Colliders
          • Zones
          • Lights
        • 360 Scene
        • Orbit Scene
      • Elements
        • Image
        • Video
        • Audio
        • GIF
        • Text to Speech
        • Character
        • Character AI
        • Actionbar
        • Timer
        • Polygon
        • Linked Popups
        • Variants
      • Rules
        • Shared Rules
        • How Rules Work
        • Number Variable Rules
        • String Variable Rules
        • Boolean Variable Rules
      • Variables
        • Autogenerated Variables
        • String Substitution
        • Capturing User Input
      • Build FAQs
    • Publishing
      • URL or QR Code
      • Embed on your Website
      • Full-Page HTML
      • Embedding within Apps
        • Android Embed
        • React Native Embed
      • Export as SCORM package
      • Authentication
        • SSO
        • Password With Expiry
        • Email with OTP
        • Custom List
        • Token
        • Load from another Experience
      • Publishing FAQs
      • Private Cloud Deployment
    • Multiplayer
      • Host Mode
      • Broadcast Mode
      • Voice Chat
      • Text Chat
      • Video Chat
      • Screenshare
      • Comments
      • Share Reactions
      • Notifications
      • Troubleshooting webcam and microphone
    • Analytics
      • Advanced Analytics
      • Leaderboard
      • Viewer Sessions
    • Integrations
      • GMetri with SCORM
        • Embed a SCORM package in a GMetri experience
      • Live Stream on GMetri
        • Live Stream Zoom on YouTube
        • Live Stream Zoom on Vimeo
          • Zoom Setup
      • E-Commerce with GMetri
        • Shopify Integration
        • WooCommerce Integration
        • Custom Integration
        • Using an E-Commerce Plugin
      • Adding a Chatbot
      • Sending data to GMetri Deployment
    • Viewing
      • Avatars
      • First/Third Person
      • Concurrency
      • Oculus Controls
      • Viewer Keyboard Shortcuts
      • IT Permissions
        • Whitelisting for Viewing Experiences
        • Whitelisting for Editing Experiences
        • Whitelisting for Analytics
        • Subprocessors
    • GMetri SDK
      • GMetri Player
      • GMetri SDK APIs
        • Project
        • Deployment
        • File
        • Viewer Group
      • GMetri Webhooks
      • API Token
      • Examples
  • Guidelines/Compatibility
    • Guidelines
      • Content Creation Guidelines
        • XR Experience Storyboard
        • 360 Degree Video Shoots
        • Avatars vs Characters
        • Designing 3D Models for Immersive VR mode
      • Asset Guidelines
        • 3D Models
          • Export GLB/GLTF from 3DS Max
          • Export GLB/GLTF from Blender
        • 360 Pano Images Render
        • Resources for Assets
        • Asset FAQs
        • Image Aspect Ratio
      • Experience Optimizations
        • Scene Optimizations
          • Performance Monitor
        • Image Optimizations
        • Audio Optimizations
        • Video Optimizations
        • 3D Model Optimizations
      • Workflows
        • Green Screen
          • Apply Green Screen to Videos
          • Accurate Color Selection
        • QR Code Scanner
        • Adding Sprites
        • Adding Background Music & Persistent Logo
        • EmbedHTML Snippets
    • Compatibility
      • Platform Requirements - Viewer
      • Platform Compatibility Matrix
      • Supported File Formats
      • Supported Browsers
      • Capture Network and Console Logs from Chrome Browser
    • Limitations
      • iOS Limitations
      • VR Mode Limitations
  • Platform
    • Billing
    • Platform FAQs
    • Security
    • Legal
Powered by GitBook
On this page
  • Requirements for a Custom E-Commerce Plugin
  • Integration within Apps​

Was this helpful?

Edit on GitHub
Export as PDF
  1. Metaverse
  2. Integrations
  3. E-Commerce with GMetri

Custom Integration

PreviousWooCommerce IntegrationNextUsing an E-Commerce Plugin

Last updated 4 months ago

Was this helpful?

Requirements for a Custom E-Commerce Plugin

To create an ecommerce plugin, we need 3 things

1. User Identification Mechanism​

When the user first visits the 360° store, how should we identify the user? This could be done via a query parameter, but needs to be pre decided and fixed before the plugin is created. Any additional parameters that are needed for any further API calls can also be forwarded using this method.

Eg: <<user_identifier>>

2. API Details​

  1. Listing all products. This is needed when we link elements on the scene with the SKU and variants on the e-commerce platform. There may be additional qualifiers like “category” or “region” that can be used as an input to this API, to filter the products that get sent.

  2. Getting details of one product. This would be an API (or multiple APIs) that take the SKU id of the product as input and give all details of the product (including price) as the output. This is used to populate the product card. This would also include any APIs that are needed to get the stock/availability of products.

  3. Starting Cart Session and Cart APIs. GMetri has the ability to maintain the cart session on its end in the UI itself. This can be communicated to the e-commerce platform when the actual checkout is started. However, if we need to sync cart items at realtime, we can do that using cart APIs that allow GMetri to:

    1. Add items to cart

    2. Remove items/change quantity from cart

    3. List cart/get Cart Length - this is used to specify the number label on the cart icon

  4. APIs to be called before redireciton to checkout. In case there are APIs that can be called to pass the user’s cart’s state to the e-commerce platform, please let us know those too.

  5. Staging environment details if present. Also the differences between staging and production environment.

3. Checkout Redirection Mechanism​

For the actual checkout, GMetri will redirect the user to the usual checkout journey of the e-commerce platform. Details of this handoff need to be communicated here. For websites, this would usually be the checkout or cart URL. For Apps (both Android / iOS) this would be a deep-link, which takes you to the cart page of the app.

The experience link should append the following optional params

  • ?platform=web for website

  • ?platform=msite for mobile website (if needed)

  • ?platform=android for android app

  • ?platform=ios for iOS app

    The checkout URL can be different for each of these platforms.

Integration within Apps​

Integration within apps will work by running the link generated above of an iframe(web) equivalent in the app.

  1. iOS - There are 2 implementations that can be used namely WKWebView and SFSafariViewController. Both these implementations are similar to android’s chrome custom tabs implementation but have their own set of use-cases. We recommend using SFSafariViewController to run GMetri experiences within your app to get the full immersive experience. Documentation for both can be found here:

Android - Chrome Custom Tabs - Custom Tabs is a browser feature, introduced by Chrome, that is now supported by most major browsers on Android. It gives apps more control over their web experience, and makes transitions between native and web content more seamless without having to resort to a WebView.More documentation can be found

We have a small guide on integrating Chrome Custom tabs to run GMetri experiences with ease

WKWebView :

SFSafariViewController :

https://view.gmetri.com/v5/org-name/store?uid=
here
here
WKWebView
SFSafariViewController