➕ Create chat buttons widget
To get the app working on your page, you need to create and configure at least one group buttons widget.
This section outlines the process for creating and customizing the chat buttons widget, including channel selection, channel configuration, button group style, and triggering events.
Step 1: Access the App Widget Dashboard
Navigate to your Shopify admin panel.
Click on 'Apps' and select 'Omega Chat' app.
Move to tab Widget
Step 2: Click Create first widget, enter widget name and start create your widget.
Step 3: Select Chat Button Channels
Select from available channels such as Facebook Messenger, WhatsApp, Telegram, etc. You can add multiple channels to cater to various customer preferences.
For each channel you want to include, click the channel icon button. This action will create a separate configuration section for each selected channel in next step.
Step 4: Set Up Button Channel
In this step, you can configure the appearance and communication details for each channel, such as:
Communication details (page URL, contact link, email address, phone number, etc.).
Choose the device where the button channel will be displayed.
Customize the channel button tooltip.
Customize the channel icon; you can pick a color for the icon that matches your brand or upload your own icon for each channel.
Sort the button channel display order.
Some channels, such as WhatsApp and Messenger, allow you to enable chatbox settings with configurations like welcome messages, descriptions, etc. However, to converse, customers will still be directed back to the channel.
You can also customize the icon and color of the button wrapper, or keep the button list always expanded by turning off the button wrapper.
Step 5: Set Up Group Style
This section of the document details how to customize the group style of your chat widget to ensure it aligns well with the aesthetics of your website.
Widget Size: Modify the overall size of the widget to better fit your webpage layout and user interaction needs.
Side Spacing and Bottom Spacing: Adjust the side and bottom spacing to position the buttons widget more precisely on your page.
Icons View: Choose how the button group should expand or collapse — either vertically or horizontally.
Tooltip: Customize the color of the tooltips and their background to match your site’s theme.
Widget border: Change the border radius to give your widget rounded corners for a softer look or sharp corners for a more defined appearance.
Custom CSS: Apply custom CSS to further tailor the appearance and behavior of the widget.
Step 6: Set Up Trigger Event and Target
In this step, you will configure the display conditions for the group buttons:
Enable/Disable whether the group button is displayed on the page.
Set the display conditions for the button, specifying how many seconds after page load and after the customer has scrolled a certain percentage of the page it should appear.
Choose buttons will be displayed or excluded from certain pages of the store.
Set the working hours and days for the button to be displayed.
Step 7: Preview your buttons widget.
All settings screens have a small preview pane on the right so you can visually review your display settings.
Step 8: Once all settings are configured:
Now that you have completed the setup, click the 'Save and Exit' button to store your configurations. You can then return to your site and see how the application works. Make sure that you have enabled the theme app extension.
This section outlines the process for creating and customizing the chat buttons widget, including channel selection, channel configuration, button group style, and triggering events.
Steps
Step 1: Access the App Widget Dashboard
Navigate to your Shopify admin panel.
Click on 'Apps' and select 'Omega Chat' app.
Move to tab Widget
Step 2: Click Create first widget, enter widget name and start create your widget.
Step 3: Select Chat Button Channels
Select from available channels such as Facebook Messenger, WhatsApp, Telegram, etc. You can add multiple channels to cater to various customer preferences.
For each channel you want to include, click the channel icon button. This action will create a separate configuration section for each selected channel in next step.
Step 4: Set Up Button Channel
In this step, you can configure the appearance and communication details for each channel, such as:
Communication details (page URL, contact link, email address, phone number, etc.).
Choose the device where the button channel will be displayed.
Customize the channel button tooltip.
Customize the channel icon; you can pick a color for the icon that matches your brand or upload your own icon for each channel.
Sort the button channel display order.
Some channels, such as WhatsApp and Messenger, allow you to enable chatbox settings with configurations like welcome messages, descriptions, etc. However, to converse, customers will still be directed back to the channel.
You can also customize the icon and color of the button wrapper, or keep the button list always expanded by turning off the button wrapper.
Step 5: Set Up Group Style
This section of the document details how to customize the group style of your chat widget to ensure it aligns well with the aesthetics of your website.
Widget Size: Modify the overall size of the widget to better fit your webpage layout and user interaction needs.
Side Spacing and Bottom Spacing: Adjust the side and bottom spacing to position the buttons widget more precisely on your page.
Icons View: Choose how the button group should expand or collapse — either vertically or horizontally.
Tooltip: Customize the color of the tooltips and their background to match your site’s theme.
Widget border: Change the border radius to give your widget rounded corners for a softer look or sharp corners for a more defined appearance.
Custom CSS: Apply custom CSS to further tailor the appearance and behavior of the widget.
Step 6: Set Up Trigger Event and Target
In this step, you will configure the display conditions for the group buttons:
Enable/Disable whether the group button is displayed on the page.
Set the display conditions for the button, specifying how many seconds after page load and after the customer has scrolled a certain percentage of the page it should appear.
Choose buttons will be displayed or excluded from certain pages of the store.
Set the working hours and days for the button to be displayed.
Step 7: Preview your buttons widget.
All settings screens have a small preview pane on the right so you can visually review your display settings.
Step 8: Once all settings are configured:
Now that you have completed the setup, click the 'Save and Exit' button to store your configurations. You can then return to your site and see how the application works. Make sure that you have enabled the theme app extension.
Updated on: 05/12/2024
Thank you!