feat: OG Image in Chatwoot Help Center (#11826)

_Note: This is only available for Cloud version of Chatwoot._



![image](https://github.com/user-attachments/assets/b7d61035-8682-4dbd-9460-4f8546ca6a98)

app/controllers/public/api/v1/portals/articles_controller.rb

@@ -17,7 +17,9 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
     limit_results
   end
 
-  def show; end
+  def show
+    @og_image_url = helpers.set_og_image_url(@portal.name, @article.title)
+  end
 
   def tracking_pixel
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])

app/controllers/public/api/v1/portals/categories_controller.rb

@@ -8,7 +8,9 @@ class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals:
     @categories = @portal.categories.order(position: :asc)
   end
 
-  def show; end
+  def show
+    @og_image_url = helpers.set_og_image_url(@portal.name, @category.name)
+  end
 
   private
 

app/controllers/public/api/v1/portals_controller.rb

@@ -4,7 +4,9 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
   before_action :redirect_to_portal_with_locale, only: [:show]
   layout 'portal'
 
-  def show; end
+  def show
+    @og_image_url = helpers.set_og_image_url('', @portal.header_text)
+  end
 
   def sitemap
     @help_center_url = @portal.custom_domain || ChatwootApp.help_center_root

app/helpers/portal_helper.rb

@@ -1,4 +1,21 @@
 module PortalHelper
+  def set_og_image_url(portal_name, title)
+    cdn_url = GlobalConfig.get('OG_IMAGE_CDN_URL')['OG_IMAGE_CDN_URL']
+    return if cdn_url.blank?
+
+    client_ref = GlobalConfig.get('OG_IMAGE_CLIENT_REF')['OG_IMAGE_CLIENT_REF']
+
+    uri = URI.parse(cdn_url)
+    uri.path = '/og'
+    uri.query = URI.encode_www_form(
+      clientRef: client_ref,
+      title: title,
+      portalName: portal_name
+    )
+
+    uri.to_s
+  end
+
   def generate_portal_bg_color(portal_color, theme)
     base_color = theme == 'dark' ? 'black' : 'white'
     "color-mix(in srgb, #{portal_color} 20%, #{base_color})"

app/views/public/api/v1/portals/_hero.html.erb

@@ -1,4 +1,15 @@
 <% if !@is_plain_layout_enabled %>
+<% content_for :head do %>
+  <title><%= @portal.name %></title>
+  <meta name="title" content="<%= @portal.name %>">
+
+  <% if @og_image_url.present? %>
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta property="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta name="twitter:image" content="<%= @og_image_url.html_safe %>">
+  <% end %>
+<% end %>
 <section id="portal-bg" class="w-full bg-white dark:bg-slate-900 shadow-inner">
   <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6 min-h-[240px] md:min-h-[260px]">
     <div class="mx-auto max-w-5xl px-4 md:px-8 flex flex-col items-start">

app/views/public/api/v1/portals/articles/show.html.erb

@@ -2,13 +2,23 @@
   <title><%= @article.title %> | <%= @portal.name %></title>
   <% if @article.meta["title"].present? %>
     <meta name="title" content="<%= @article.meta["title"] %>">
+    <meta property="og:title" content="<%= @article.meta["title"] %>">
+    <meta name="twitter:title" content="<%= @article.meta["title"] %>">
   <% end %>
   <% if @article.meta["description"].present? %>
     <meta name="description" content="<%= @article.meta["description"] %>">
+    <meta property="og:description" content="<%= @article.meta["description"] %>">
+    <meta name="twitter:description" content="<%= @article.meta["description"] %>">
   <% end %>
   <% if @article.meta["tags"].present? %>
     <meta name="tags" content="<%= @article.meta["tags"].join(',') %>">
   <% end %>
+  <% if @og_image_url.present? %>
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta property="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta name="twitter:image" content="<%= @og_image_url.html_safe %>">
+  <% end %>
 <% end %>
 
 <% if !@is_plain_layout_enabled %>

app/views/public/api/v1/portals/categories/show.html.erb

@@ -1,7 +1,16 @@
 <% content_for :head do %>
   <title><%= @category.name %> | <%= @portal.name %></title>
+  <meta name="title" content="<%= @category.name %> | <%= @portal.name %>">
   <% if @category.description.present? %>
     <meta name="description" content="<%= @category.description %>">
+    <meta property="og:description" content="<%= @category.description %>">
+    <meta name="twitter:description" content="<%= @category.description %>">
+  <% end %>
+  <% if @og_image_url.present? %>
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta property="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta name="twitter:image" content="<%= @og_image_url.html_safe %>">
   <% end %>
 <% end %>
 
@@ -35,7 +44,7 @@
           <span class="text-sm text-slate-600 dark:text-slate-400 font-medium flex items-center"><%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %></span>
         </div>
       </a>
-    </div>  
+    </div>
     <% end %>
     <% end %>
   </div>