diff --git a/graphiql.go b/graphiql.go
index d997374..b6987f2 100644
--- a/graphiql.go
+++ b/graphiql.go
@@ -4,21 +4,27 @@ import (
 	"encoding/json"
 	"html/template"
 	"net/http"
+	"strings"
 
 	"github.com/graphql-go/graphql"
 )
 
 // page is the page data structure of the rendered GraphiQL page
 type graphiqlPage struct {
-	GraphiqlVersion string
-	QueryString     string
-	ResultString    string
-	VariablesString string
-	OperationName   string
+	GraphiqlVersion              string
+	SubscriptionTransportVersion string
+	QueryString                  string
+	ResultString                 string
+	VariablesString              string
+	OperationName                string
+	Endpoint                     template.URL
+	SubscriptionEndpoint         template.URL
+	UsingHTTP                    bool
+	UsingWS                      bool
 }
 
 // renderGraphiQL renders the GraphiQL GUI
-func renderGraphiQL(w http.ResponseWriter, params graphql.Params) {
+func renderGraphiQL(w http.ResponseWriter, params graphql.Params, handler Handler) {
 	t := template.New("GraphiQL")
 	t, err := t.Parse(graphiqlTemplate)
 	if err != nil {
@@ -50,12 +56,29 @@ func renderGraphiQL(w http.ResponseWriter, params graphql.Params) {
 		resString = string(result)
 	}
 
+	isEndpointUsingWS := strings.HasPrefix(handler.Endpoint, "ws://")
+	UsingHTTP := !isEndpointUsingWS
+	UsingWS := isEndpointUsingWS || handler.SubscriptionsEndpoint != ""
+	SubscriptionEndpoint := ""
+	if UsingWS {
+		if isEndpointUsingWS {
+			SubscriptionEndpoint = handler.Endpoint
+		} else {
+			SubscriptionEndpoint = handler.SubscriptionsEndpoint
+		}
+	}
+
 	p := graphiqlPage{
-		GraphiqlVersion: graphiqlVersion,
-		QueryString:     params.RequestString,
-		ResultString:    resString,
-		VariablesString: varsString,
-		OperationName:   params.OperationName,
+		GraphiqlVersion:              graphiqlVersion,
+		SubscriptionTransportVersion: subscriptionTransportVersion,
+		QueryString:                  params.RequestString,
+		ResultString:                 resString,
+		VariablesString:              varsString,
+		OperationName:                params.OperationName,
+		Endpoint:                     template.URL(handler.Endpoint),
+		SubscriptionEndpoint:         template.URL(SubscriptionEndpoint),
+		UsingHTTP:                    UsingHTTP,
+		UsingWS:                      UsingWS,
 	}
 
 	err = t.ExecuteTemplate(w, "index", p)
@@ -68,6 +91,9 @@ func renderGraphiQL(w http.ResponseWriter, params graphql.Params) {
 // graphiqlVersion is the current version of GraphiQL
 const graphiqlVersion = "0.11.10"
 
+// subscriptionTransportVersion is the current version of the subscription transport of GraphiQL
+const subscriptionTransportVersion = "0.8.2"
+
 // tmpl is the page template to render GraphiQL
 const graphiqlTemplate = `
 {{ define "index" }}
@@ -94,10 +120,20 @@ add "&raw" to the end of the URL within a browser.
     }
   </style>
   <link href="//cdn.jsdelivr.net/npm/graphiql@{{ .GraphiqlVersion }}/graphiql.css" rel="stylesheet" />
-  <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
   <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
   <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/graphiql@{{ .GraphiqlVersion }}/graphiql.min.js"></script>
+
+  {{ if .UsingHTTP }}
+    <script src="//cdn.jsdelivr.net/fetch/2.0.1/fetch.min.js"></script>
+  {{ end }}
+  {{ if .UsingWS }}
+    <script src="//unpkg.com/subscriptions-transport-ws@{{ .SubscriptionTransportVersion }}/browser/client.js"></script>
+  {{ end }}
+  {{ if and .UsingWS .UsingHTTP }}
+    <script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>
+  {{ end }}
+
 </head>
 <body>
   <script>
@@ -112,10 +148,8 @@ add "&raw" to the end of the URL within a browser.
     });
 
     // Produce a Location query string from a parameter object.
-    function locationQuery(params) {
-      return '?' + Object.keys(params).filter(function (key) {
-        return Boolean(params[key]);
-      }).map(function (key) {
+    function locationQuery(params, location) {
+      return (location ? location: '') + '?' + Object.keys(params).map(function (key) {
         return encodeURIComponent(key) + '=' +
           encodeURIComponent(params[key]);
       }).join('&');
@@ -134,28 +168,49 @@ add "&raw" to the end of the URL within a browser.
         otherParams[k] = parameters[k];
       }
     }
-    var fetchURL = locationQuery(otherParams);
-
-    // Defines a GraphQL fetcher using the fetch API.
-    function graphQLFetcher(graphQLParams) {
-      return fetch(fetchURL, {
-        method: 'post',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(graphQLParams),
-        credentials: 'include',
-      }).then(function (response) {
-        return response.text();
-      }).then(function (responseBody) {
-        try {
-          return JSON.parse(responseBody);
-        } catch (error) {
-          return responseBody;
-        }
+
+    {{ if .UsingWS }}
+      var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient({{ .SubscriptionEndpoint }}, {
+        reconnect: true
       });
-    }
+      var graphQLWSFetcher = subscriptionsClient.request.bind(subscriptionsClient);
+    {{ end }}
+
+    {{ if .UsingHTTP }}
+      var fetchURL = locationQuery(otherParams, {{ .Endpoint }});
+
+      // Defines a GraphQL fetcher using the fetch API.
+      function graphQLHttpFetcher(graphQLParams) {
+        return fetch(fetchURL, {
+          method: 'post',
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(graphQLParams),
+          credentials: 'include',
+        }).then(function (response) {
+          return response.text();
+        }).then(function (responseBody) {
+          try {
+            return JSON.parse(responseBody);
+          } catch (error) {
+            return responseBody;
+          }
+        });
+      }
+    {{ end }}
+
+    {{ if and .UsingWS .UsingHTTP }}
+      var fetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLHttpFetcher);
+    {{ else }}
+      {{ if .UsingWS }}
+        var fetcher = graphQLWSFetcher;
+      {{ end }}
+      {{ if .UsingHTTP }}
+        var fetcher = graphQLHttpFetcher;
+      {{ end }}
+    {{ end }}
 
     // When the query and variables string is edited, update the URL bar so
     // that it can be easily shared.
@@ -181,7 +236,7 @@ add "&raw" to the end of the URL within a browser.
     // Render <GraphiQL /> into the body.
     ReactDOM.render(
       React.createElement(GraphiQL, {
-        fetcher: graphQLFetcher,
+        fetcher: fetcher,
         onEditQuery: onEditQuery,
         onEditVariables: onEditVariables,
         onEditOperationName: onEditOperationName,
diff --git a/handler.go b/handler.go
index cfcb1ca..9e34617 100644
--- a/handler.go
+++ b/handler.go
@@ -19,9 +19,11 @@ const (
 )
 
 type Handler struct {
-	Schema *graphql.Schema
-	pretty   bool
-	graphiql bool
+	Schema                *graphql.Schema
+	pretty                bool
+	graphiql              bool
+	Endpoint              string
+	SubscriptionsEndpoint string
 }
 type RequestOptions struct {
 	Query         string                 `json:"query" url:"query" schema:"query"`
@@ -133,7 +135,7 @@ func (h *Handler) ContextHandler(ctx context.Context, w http.ResponseWriter, r *
 		acceptHeader := r.Header.Get("Accept")
 		_, raw := r.URL.Query()["raw"]
 		if !raw && !strings.Contains(acceptHeader, "application/json") && strings.Contains(acceptHeader, "text/html") {
-			renderGraphiQL(w, params)
+			renderGraphiQL(w, params, *h)
 			return
 		}
 	}
@@ -160,16 +162,20 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 }
 
 type Config struct {
-	Schema   *graphql.Schema
-	Pretty   bool
-	GraphiQL bool
+	Schema                *graphql.Schema
+	Pretty                bool
+	GraphiQL              bool
+	Endpoint              string
+	SubscriptionsEndpoint string
 }
 
 func NewConfig() *Config {
 	return &Config{
-		Schema:   nil,
-		Pretty:   true,
-		GraphiQL: true,
+		Schema:                nil,
+		Pretty:                true,
+		GraphiQL:              true,
+		Endpoint:              "",
+		SubscriptionsEndpoint: "",
 	}
 }
 
@@ -182,8 +188,10 @@ func New(p *Config) *Handler {
 	}
 
 	return &Handler{
-		Schema:   p.Schema,
-		pretty:   p.Pretty,
-		graphiql: p.GraphiQL,
+		Schema:                p.Schema,
+		pretty:                p.Pretty,
+		graphiql:              p.GraphiQL,
+		Endpoint:              p.Endpoint,
+		SubscriptionsEndpoint: p.SubscriptionsEndpoint,
 	}
 }
