diff --git a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
index 78070d7bb..6f996bc8b 100644
--- a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
+++ b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
@@ -170,7 +170,7 @@ class PlaygroundWrapper extends React.Component<
       }`
     }
 
-    return endpoint
+    return endpoint.replace(/^http/, 'ws')
   }
 
   componentWillReceiveProps(nextProps: PlaygroundWrapperProps & ReduxProps) {
@@ -253,7 +253,9 @@ class PlaygroundWrapper extends React.Component<
         activeEnv.projectName,
       )
       const endpoint = endpoints.endpoint
-      const subscriptionEndpoint = endpoints.subscriptionEndpoint
+      const subscriptionEndpoint =
+        endpoints.subscriptionEndpoint ||
+        this.normalizeSubscriptionUrl(endpoint, endpoints.subscriptionEndpoint)
       const headers = endpoints.headers
       this.setState({
         endpoint,
diff --git a/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts b/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts
index 6d86c1f3f..c2ee40378 100644
--- a/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts
+++ b/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts
@@ -74,8 +74,10 @@ export const defaultLinkCreator = (
     return { link: httpLink }
   }
 
+  const finalSubscriptionsEndpoint = wsEndpoint || subscriptionEndpoint
+
   const subscriptionClient = new SubscriptionClient(
-    wsEndpoint || subscriptionEndpoint,
+    finalSubscriptionsEndpoint,
     {
       timeout: 20000,
       lazy: true,