🔥 Remove VIEWER_URL_INTERNAL variable

BREAKING CHANGE: NEXT_PUBLIC_VIEWER_INTERNAL does not exist anymore as typebot.io now directly points to the viewer project

apps/builder/src/components/SupportBubble.tsx

@@ -20,7 +20,6 @@ export const SupportBubble = (props: Omit<BubbleProps, 'typebot'>) => {
 
   return (
     <Bubble
-      apiHost="https://viewer.typebot.io"
       typebot="typebot-support"
       prefilledVariables={{
         'User ID': user?.id,

apps/builder/src/features/blocks/integrations/webhook/queries/executeWebhookQuery.ts

@@ -1,6 +1,6 @@
 import { Variable, WebhookResponse } from '@typebot.io/schemas'
 import { sendRequest } from '@typebot.io/lib'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
+import { env } from '@typebot.io/env'
 
 export const executeWebhook = (
   typebotId: string,
@@ -8,7 +8,7 @@ export const executeWebhook = (
   { blockId }: { blockId: string }
 ) =>
   sendRequest<WebhookResponse>({
-    url: `${getViewerUrl()}/api/typebots/${typebotId}/blocks/${blockId}/executeWebhook`,
+    url: `${env.NEXT_PUBLIC_VIEWER_URL[0]}/api/typebots/${typebotId}/blocks/${blockId}/executeWebhook`,
     method: 'POST',
     body: {
       variables,

apps/builder/src/features/publish/components/embeds/modals/FlutterFlowModal.tsx

@@ -18,8 +18,8 @@ import {
   Text,
   Stack,
 } from '@chakra-ui/react'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import { ModalProps } from '../EmbedButton'
+import { env } from '@typebot.io/env'
 
 export const FlutterFlowModal = ({
   isPublished,
@@ -51,12 +51,12 @@ export const FlutterFlowModal = ({
                 <InputGroup size="sm">
                   <Input
                     type={'text'}
-                    defaultValue={`${getViewerUrl()}/${publicId}`}
+                    defaultValue={`${env.NEXT_PUBLIC_VIEWER_URL[0]}/${publicId}`}
                   />
                   <InputRightElement width="60px">
                     <CopyButton
                       size="sm"
-                      textToCopy={`${getViewerUrl()}/${publicId}`}
+                      textToCopy={`${env.NEXT_PUBLIC_VIEWER_URL[0]}/${publicId}`}
                     />
                   </InputRightElement>
                 </InputGroup>

apps/builder/src/features/publish/components/embeds/modals/IframeModal/IframeSnippet.tsx

@@ -1,9 +1,9 @@
 import { FlexProps } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import prettier from 'prettier/standalone'
 import parserHtml from 'prettier/parser-html'
+import { env } from '@typebot.io/env'
 
 type Props = {
   widthLabel: string
@@ -13,7 +13,7 @@ type Props = {
 
 export const IframeSnippet = ({ widthLabel, heightLabel }: Props) => {
   const { typebot } = useTypebot()
-  const src = `${getViewerUrl()}/${typebot?.publicId}`
+  const src = `${env.NEXT_PUBLIC_VIEWER_URL[0]}/${typebot?.publicId}`
   const code = prettier.format(
     `<iframe src="${src}" style="border: none; width=${widthLabel}; height=${heightLabel}"></iframe>`,
     { parser: 'html', plugins: [parserHtml] }

apps/builder/src/features/publish/components/embeds/modals/NotionModal.tsx

@@ -18,8 +18,8 @@ import {
   Text,
   Stack,
 } from '@chakra-ui/react'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import { ModalProps } from '../EmbedButton'
+import { env } from '@typebot.io/env'
 
 export const NotionModal = ({
   isPublished,
@@ -49,12 +49,12 @@ export const NotionModal = ({
                 <InputGroup size="sm">
                   <Input
                     type={'text'}
-                    defaultValue={`${getViewerUrl()}/${publicId}`}
+                    defaultValue={`${env.NEXT_PUBLIC_VIEWER_URL[0]}/${publicId}`}
                   />
                   <InputRightElement width="60px">
                     <CopyButton
                       size="sm"
-                      textToCopy={`${getViewerUrl()}/${publicId}`}
+                      textToCopy={`${env.NEXT_PUBLIC_VIEWER_URL[0]}/${publicId}`}
                     />
                   </InputRightElement>
                 </InputGroup>

apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal.tsx

@@ -41,7 +41,6 @@ import {
 } from '@chakra-ui/react'
 import { env } from '@typebot.io/env'
 import { isEmpty, isNotEmpty } from '@typebot.io/lib/utils'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import React, { useState } from 'react'
 import { createId } from '@paralleldrive/cuid2'
 
@@ -449,9 +448,7 @@ const Webhook = ({
   credentialsId: string
 }) => {
   const { workspace } = useWorkspace()
-  const webhookUrl = `${
+  const webhookUrl = `${env.NEXT_PUBLIC_VIEWER_URL[0]}/api/v1/workspaces/${workspace?.id}/whatsapp/${credentialsId}/webhook`
-    env.NEXT_PUBLIC_VIEWER_INTERNAL_URL ?? getViewerUrl()
-  }/api/v1/workspaces/${workspace?.id}/whatsapp/${credentialsId}/webhook`
 
   return (
     <Stack spacing={6}>

apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressStandardInstructions.tsx

@@ -12,7 +12,7 @@ import {
 import { useState } from 'react'
 import { StandardSettings } from '../../../settings/StandardSettings'
 import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
+import { env } from '@typebot.io/env'
 
 type Props = {
   publicId: string
@@ -76,7 +76,7 @@ const parseWordpressShortcode = ({
   publicId: string
 }) => {
   return `[typebot typebot="${publicId}"${
-    isCloudProdInstance() ? '' : ` host="${getViewerUrl()}"`
+    isCloudProdInstance() ? '' : ` host="${env.NEXT_PUBLIC_VIEWER_URL[0]}"`
   }${width ? ` width="${width}"` : ''}${height ? ` height="${height}"` : ''}]
 `
 }

apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts

@@ -2,10 +2,10 @@ import { BotProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { isDefined } from '@typebot.io/lib'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import { Typebot } from '@typebot.io/schemas'
 import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import packageJson from '../../../../../../../../packages/embeds/js/package.json'
+import { env } from '@typebot.io/env'
 
 export const parseStringParam = (
   fieldName: string,
@@ -59,7 +59,7 @@ export const parseApiHost = (
   customDomain: Typebot['customDomain'] | undefined
 ) => {
   if (customDomain) return new URL(`https://${customDomain}`).origin
-  return getViewerUrl()
+  return env.NEXT_PUBLIC_VIEWER_URL[0]
 }
 
 export const parseApiHostValue = (

apps/builder/src/features/settings/components/SettingsPage.tsx

@@ -1,11 +1,11 @@
 import { Seo } from '@/components/Seo'
 import { Flex } from '@chakra-ui/react'
 import { Standard } from '@typebot.io/nextjs'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import { SettingsSideMenu } from './SettingsSideMenu'
 import { TypebotHeader } from '@/features/editor/components/TypebotHeader'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { TypebotNotFoundPage } from '@/features/editor/components/TypebotNotFoundPage'
+import { env } from '@typebot.io/env'
 
 export const SettingsPage = () => {
   const { typebot, is404 } = useTypebot()
@@ -18,7 +18,12 @@ export const SettingsPage = () => {
       <Flex h="full" w="full">
         <SettingsSideMenu />
         <Flex flex="1">
-          {typebot && <Standard apiHost={getViewerUrl()} typebot={typebot} />}
+          {typebot && (
+            <Standard
+              apiHost={env.NEXT_PUBLIC_VIEWER_URL[0]}
+              typebot={typebot}
+            />
+          )}
         </Flex>
       </Flex>
     </Flex>

apps/landing-page/components/Homepage/RealTimeResults.tsx

@@ -91,7 +91,6 @@ export const RealTimeResults = () => {
           {typebot && (
             <Standard
               typebot="airtable-real-time"
-              apiHost="https://typebot.io"
               onAnswer={handleAnswer}
               style={{
                 borderRadius: '0.375rem',

apps/viewer/src/components/ErrorPage.tsx

@@ -1,5 +1,5 @@
+import { env } from '@typebot.io/env'
 import React from 'react'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 
 export const ErrorPage = ({ error }: { error: Error }) => {
   return (
@@ -13,7 +13,7 @@ export const ErrorPage = ({ error }: { error: Error }) => {
         padding: '0 1rem',
       }}
     >
-      {!getViewerUrl() ? (
+      {!env.NEXT_PUBLIC_VIEWER_URL[0] ? (
         <>
           <h1 style={{ fontWeight: 'bold', fontSize: '30px' }}>
             NEXT_PUBLIC_VIEWER_URL is missing

apps/viewer/src/components/Seo.tsx

@@ -3,9 +3,9 @@ import Head from 'next/head'
 import Script from 'next/script'
 import React from 'react'
 import { isNotEmpty } from '@typebot.io/lib'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import { Settings } from '@typebot.io/schemas'
 import { defaultSettings } from '@typebot.io/schemas/features/typebot/settings/constants'
+import { env } from '@typebot.io/env'
 
 type SEOProps = {
   url: string
@@ -31,7 +31,10 @@ export const SEO = ({
       <link
         rel="icon"
         type="image/png"
-        href={favIconUrl ?? defaultSettings.metadata.favIconUrl(getViewerUrl())}
+        href={
+          favIconUrl ??
+          defaultSettings.metadata.favIconUrl(env.NEXT_PUBLIC_VIEWER_URL[0])
+        }
       />
       <meta name="title" content={title ?? typebotName} />
       <meta
@@ -56,7 +59,10 @@ export const SEO = ({
       <meta
         property="og:image"
         itemProp="image"
-        content={imageUrl ?? defaultSettings.metadata.imageUrl(getViewerUrl())}
+        content={
+          imageUrl ??
+          defaultSettings.metadata.imageUrl(env.NEXT_PUBLIC_VIEWER_URL[0])
+        }
       />
 
       <meta property="twitter:card" content="summary_large_image" />
@@ -71,7 +77,10 @@ export const SEO = ({
       />
       <meta
         property="twitter:image"
-        content={imageUrl ?? defaultSettings.metadata.imageUrl(getViewerUrl())}
+        content={
+          imageUrl ??
+          defaultSettings.metadata.imageUrl(env.NEXT_PUBLIC_VIEWER_URL[0])
+        }
       />
     </Head>
     {isNotEmpty(googleTagManagerId) && (

packages/deprecated/bot-engine/package.json

@@ -41,7 +41,8 @@
     "tsup": "6.5.0",
     "typebot-js": "workspace:*",
     "typescript": "5.3.2",
-    "@typebot.io/lib": "workspace:*"
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/env": "workspace:*"
   },
   "peerDependencies": {
     "@typebot.io/prisma": "workspace:*",

packages/deprecated/bot-engine/src/components/TypebotViewer.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useMemo } from 'react'
+import { useMemo } from 'react'
 import { TypebotProvider } from '../providers/TypebotProvider'
 import styles from '../assets/style.css'
 import importantStyles from '../assets/importantStyles.css'
@@ -14,8 +14,8 @@ import {
 import { Log } from '@typebot.io/prisma'
 import { LiteBadge } from './LiteBadge'
 import { isNotEmpty } from '@typebot.io/lib'
-import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import { BackgroundType } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { env } from '@typebot.io/env'
 
 export type TypebotViewerProps = {
   typebot: Omit<PublicTypebot, 'updatedAt' | 'createdAt'>
@@ -36,7 +36,7 @@ export type TypebotViewerProps = {
 
 export const TypebotViewer = ({
   typebot,
-  apiHost = getViewerUrl(),
+  apiHost = env.NEXT_PUBLIC_VIEWER_URL[0],
   isPreview = false,
   isLoading = false,
   resultId,

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/utils/guessApiHost.ts

@@ -1,8 +1,6 @@
 import { getRuntimeVariable } from '@typebot.io/env/getRuntimeVariable'
 
-const cloudViewerUrl = 'https://viewer.typebot.io'
+const cloudViewerUrl = 'https://typebot.io'
 
 export const guessApiHost = () =>
-  getRuntimeVariable('NEXT_PUBLIC_VIEWER_INTERNAL_URL') ??
+  getRuntimeVariable('NEXT_PUBLIC_VIEWER_URL')?.split(',')[0] ?? cloudViewerUrl
-  getRuntimeVariable('NEXT_PUBLIC_VIEWER_URL')?.split(',')[0] ??
-  cloudViewerUrl

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/wordpress/trunk/public/class-typebot-public.php

@@ -94,7 +94,7 @@ class Typebot_Public
     $lib_url = "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2.15/dist/web.js";
     $width = '100%';
     $height = '500px';
-    $api_host = 'https://viewer.typebot.io';
+    $api_host = 'https://typebot.io';
     if (array_key_exists('width', $attributes)) {
       $width = sanitize_text_field($attributes['width']);
     }

packages/env/env.ts

@@ -33,16 +33,12 @@ const baseEnv = {
       .string()
       .min(1)
       .transform((string) => string.split(',')),
-    NEXT_PUBLIC_VIEWER_INTERNAL_URL: z.string().url().optional(),
     NEXT_PUBLIC_ONBOARDING_TYPEBOT_ID: z.string().min(1).optional(),
     NEXT_PUBLIC_BOT_FILE_UPLOAD_MAX_SIZE: z.coerce.number().optional(),
   },
   runtimeEnv: {
     NEXT_PUBLIC_E2E_TEST: getRuntimeVariable('NEXT_PUBLIC_E2E_TEST'),
     NEXT_PUBLIC_VIEWER_URL: getRuntimeVariable('NEXT_PUBLIC_VIEWER_URL'),
-    NEXT_PUBLIC_VIEWER_INTERNAL_URL: getRuntimeVariable(
-      'NEXT_PUBLIC_VIEWER_INTERNAL_URL'
-    ),
     NEXT_PUBLIC_ONBOARDING_TYPEBOT_ID: getRuntimeVariable(
       'NEXT_PUBLIC_ONBOARDING_TYPEBOT_ID'
     ),

packages/lib/getViewerUrl.ts

@@ -1,4 +0,0 @@
-import { env } from '@typebot.io/env'
-
-export const getViewerUrl = () =>
-  env.NEXT_PUBLIC_VIEWER_INTERNAL_URL ?? env.NEXT_PUBLIC_VIEWER_URL[0]

pnpm-lock.yaml

@@ -758,6 +758,9 @@ importers:
         specifier: 1.0.4
         version: 1.0.4
     devDependencies:
+      '@typebot.io/env':
+        specifier: workspace:*
+        version: link:../../env
       '@typebot.io/lib':
         specifier: workspace:*
         version: link:../../lib