2 files changed, 51 insertions, 1 deletions
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
new file mode 100644
index 000000000..9764227a1
--- /dev/null
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
+import { styled } from 'ts/style/theme';
+
+import { Container } from 'ts/components/ui/container';
+
+const CustomPre = styled.pre`
+    code {
+        background-color: inherit !important;
+        border-radius: 0px;
+        font-family: 'Roboto Mono', sans-serif;
+        border: none;
+    }
+`;
+
+export interface CodeDemoProps {}
+
+export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
+    const codeString = `<head>
+    <script src="http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/main.bundle.js"></script>
+</head>
+<body>
+    <script>
+        zeroExInstant.render({
+            liquiditySource: 'https://api.relayer.com/sra/v2/',
+            affiliateInfo: {
+                feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230',
+                feePercentage: 0.03
+            }
+        }, 'body');
+    </script>
+</body>`;
+    return (
+        <SyntaxHighlighter
+            useInlineStyles={true}
+            language="html"
+            style={atelierCaveDark}
+            showLineNumbers={true}
+            PreTag={CustomPre}
+        >
+            {codeString}
+        </SyntaxHighlighter>
+    );
+};
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index c836739bb..2314f968f 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
+import { CodeDemo } from 'ts/pages/instant/code_demo';
 import { colors } from 'ts/style/colors';
 
 export interface ConfiguratorProps {
@@ -8,5 +9,9 @@ export interface ConfiguratorProps {
 }
 
 export const Configurator = (props: ConfiguratorProps) => (
-    <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground} />
+    <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
+        <Container width="50%">
+            <CodeDemo />
+        </Container>
+    </Container>
 );