🧑‍💻 Improve apiOrigin detection

Closes #1696

apps/docs/editor/variables.mdx

@@ -74,8 +74,8 @@ They can be initialized in the URL as [URL parameters](https://www.semrush.com/b
 
 Then the variables will be prefilled as following:
 
-- Email => <test@test.com>
-- First name => John
+- Email => `test@test.com`
+- First name => `John`
 
 Prefilling variables using the embed library is even easier. You need to add an object named `prefilledVariables` that contains a dictionary of your values. For example:
 

apps/viewer/src/components/TypebotPageV3.tsx

@@ -9,6 +9,7 @@ import { useMemo } from 'react'
 
 export type TypebotV3PageProps = {
   url: string
+  isMatchingViewerUrl?: boolean
   name: string
   publicId: string | null
   font: Font | null
@@ -19,6 +20,7 @@ export type TypebotV3PageProps = {
 
 export const TypebotPageV3 = ({
   font,
+  isMatchingViewerUrl,
   publicId,
   name,
   url,
@@ -41,7 +43,10 @@ export const TypebotPageV3 = ({
     push(asPath.split('?')[0], undefined, { shallow: true })
   }
 
-  const apiOrigin = useMemo(() => new URL(url).origin, [url])
+  const apiOrigin = useMemo(() => {
+    if (isMatchingViewerUrl) return
+    return new URL(url).origin
+  }, [isMatchingViewerUrl, url])
 
   return (
     <div

apps/viewer/src/pages/[[...publicId]].tsx

@@ -78,6 +78,7 @@ export const getServerSideProps: GetServerSideProps = async (
       props: {
         publishedTypebot,
         incompatibleBrowser,
+        isMatchingViewerUrl,
         url: `${protocol}://${forwardedHost ?? host}${pathname}`,
       },
     }
@@ -203,6 +204,7 @@ const App = ({
   isIE: boolean
   customHeadCode: string | null
   url: string
+  isMatchingViewerUrl?: boolean
   publishedTypebot:
     | TypebotPageProps['publishedTypebot']
     | Pick<
@@ -238,6 +240,7 @@ const App = ({
   ) : (
     <TypebotPageV3
       url={props.url}
+      isMatchingViewerUrl={props.isMatchingViewerUrl}
       name={publishedTypebot.name}
       publicId={publishedTypebot.publicId}
       isHideQueryParamsEnabled={