feat: add custom meta image config (#1007)

Chainlit · May 21, 2024 · d4f937c · d4f937c
1 parent aa1f722
commit d4f937c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/backend/chainlit/config.py b/backend/chainlit/config.py
@@ -127,6 +127,9 @@
 # Specify a custom font url.
 # custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
 
+# Specify a custom meta image url.
+# custom_meta_image_url = "https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png"
+
 # Specify a custom build directory for the frontend.
 # This can be used to customize the frontend code.
 # Be careful: If this is a relative path, it should not start with a slash.
@@ -244,6 +247,9 @@ class UISettings(DataClassJsonMixin):
     custom_css: Optional[str] = None
     custom_js: Optional[str] = None
     custom_font: Optional[str] = None
+    # Optional custom meta tag for image preview
+    custom_meta_image_url: Optional[str] = None
+    # Optional custom build directory for the frontend
     custom_build: Optional[str] = None
 
 

diff --git a/backend/chainlit/server.py b/backend/chainlit/server.py
@@ -234,14 +234,16 @@ def get_html_template():
     CSS_PLACEHOLDER = "<!-- CSS INJECTION PLACEHOLDER -->"
 
     default_url = "https://github.com/Chainlit/chainlit"
+    default_meta_image_url = "https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png"
     url = config.ui.github or default_url
+    meta_image_url = config.ui.custom_meta_image_url or default_meta_image_url
 
     tags = f"""<title>{config.ui.name}</title>
     <meta name="description" content="{config.ui.description}">
     <meta property="og:type" content="website">
     <meta property="og:title" content="{config.ui.name}">
     <meta property="og:description" content="{config.ui.description}">
-    <meta property="og:image" content="https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png">
+    <meta property="og:image" content="{meta_image_url}">
     <meta property="og:url" content="{url}">"""
 
     js = f"""<script>{f"window.theme = {json.dumps(config.ui.theme.to_dict())}; " if config.ui.theme else ""}</script>"""

diff --git a/frontend/src/state/project.ts b/frontend/src/state/project.ts
@@ -20,6 +20,10 @@ export interface IProjectSettings {
     default_expand_messages?: boolean;
     github?: string;
     theme: any;
+    custom_css?: string;
+    custom_js?: string;
+    custom_font?: string;
+    custom_meta_image_url?: string;
   };
   features: {
     spontaneous_file_upload?: {