diff --git a/apps/website/src/app/demos/snapchat-share/Content.tsx b/apps/website/src/app/demos/snapchat-share/Content.tsx
new file mode 100644
index 0000000..23a32e0
--- /dev/null
+++ b/apps/website/src/app/demos/snapchat-share/Content.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import React, {FC} from 'react'
+import useSnapKit from './hooks/useSnapKit'
+
+const Component: FC = () => {
+ useSnapKit()
+
+ return (
+
+
+
+ )
+}
+
+export default Component
diff --git a/apps/website/src/app/demos/snapchat-share/hooks/useSnapKit.ts b/apps/website/src/app/demos/snapchat-share/hooks/useSnapKit.ts
new file mode 100644
index 0000000..5a495da
--- /dev/null
+++ b/apps/website/src/app/demos/snapchat-share/hooks/useSnapKit.ts
@@ -0,0 +1,44 @@
+import {useEffect} from 'react'
+
+declare global {
+ interface Window {
+ snapKitInit: () => void
+ }
+}
+
+/**
+ * Documentation page:
+ * https://developers.snap.com/snap-kit/creative-kit/web#customize-the-share-button
+ */
+const useSnapKit = () => {
+ useEffect(() => {
+ const loadSnapKit = () => {
+ const script = document.createElement('script')
+ script.src = 'https://sdk.snapkit.com/js/v1/create.js'
+ script.async = true
+
+ script.onload = () => {
+ setTimeout(() => {
+ console.log('Snap Kit SDK loaded')
+ })
+ }
+
+ script.onerror = () => {
+ console.error('Failed to load Snap Kit SDK')
+ }
+
+ document.body.appendChild(script)
+
+ window.snapKitInit = function () {
+ // @ts-ignore
+ snap.creativekit.initalizeShareButtons(
+ document.getElementsByClassName('snapchat-custom-share-button'),
+ )
+ }
+ }
+
+ loadSnapKit()
+ }, [])
+}
+
+export default useSnapKit
diff --git a/apps/website/src/app/demos/snapchat-share/page.tsx b/apps/website/src/app/demos/snapchat-share/page.tsx
new file mode 100644
index 0000000..f43b933
--- /dev/null
+++ b/apps/website/src/app/demos/snapchat-share/page.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import type {NextPage} from 'next'
+
+import Content from './Content'
+
+import Layout from '@/components/MainLayout'
+import LeftDrawer from '@/components/Drawers/LeftDrawer'
+import {menuItems} from '@/menu'
+
+import {drawerWidth} from '@/config/layout'
+import {LayoutProvider} from '@/providers'
+
+import {title} from './seo'
+
+const Title = () => {
+ return {title}
+}
+
+const PageContent = () => {
+ return (
+
+
+
+ )
+}
+
+const Page: NextPage = () => {
+ return (
+ }
+ />
+ )
+}
+
+export default Page
diff --git a/apps/website/src/app/demos/snapchat-share/seo.ts b/apps/website/src/app/demos/snapchat-share/seo.ts
new file mode 100644
index 0000000..e4e66dd
--- /dev/null
+++ b/apps/website/src/app/demos/snapchat-share/seo.ts
@@ -0,0 +1,15 @@
+import {InternalMetadata} from '@/seo/metadata'
+
+const title = 'Simple Snapchat Share Button'
+const description = 'Simple Snapchat Share Button'
+const canonical = '/demos/snapchat-share'
+
+const props: InternalMetadata = {
+ title,
+ description,
+ canonical,
+}
+
+export default props
+
+export {title}