Step-by-Step Guide to Access and Customize Chinese Horoscope Widgets Using Your Dashboard

Last updated : 19 Dec, 2024

Step-by-Step Guide to Access and Customize Chinese Horoscope Widgets Using Your Dashboard

This article will guide you through the process of logging into your dashboard, navigating to the widget section, and customizing horoscope widgets for your website. Follow the steps below for a seamless experience.

 Last updated : 19 Dec, 2024
 Guide

Step 1: Log In to Your Dashboard

Begin by visiting the login page of your astrology dashboard. Enter your registered email ID and password, as shown in the image below, and click on the "Sign In" button.

 
  • If you don’t have an account, you can click "Sign Up" to create a new one.
  • Forgot your password? Use the "Forgot Password" option to reset it.

 

Step 2: Navigate to the Dashboard

After logging in, you will be directed to the main dashboard. Here, you can access multiple features like subscriptions, billing, API keys, and widgets.

  • Locate the Widgets option in the left-hand menu.
  • Click on it to view and manage your Chinese horoscope widgets.

 

Step 3: Select the Desired Widget

In the widget section, you’ll find a list of available widgets, such as Horoscope, Indian Astrology, and Tarot Widgets. Select Horoscope to proceed and then choose the Chinese Horoscope option.

 

Step 4: Access the Widget Customization Panel

Once you select the Chinese horoscope widget, you will see the customization panel. This allows you to:

  • Copy script codes for embedding on your website.
  • Use iframe or WordPress shortcodes depending on your platform.

 

Step 5: Preview Horoscope Content

The widget preview section displays personalized Chinese horoscope readings based on the user’s zodiac sign. Users can select their sign (e.g., Dog, Dragon, Ox, etc.) from the dropdown and toggle between different periods such as Yesterday, Today, and Tomorrow for daily insights.

In addition, users can explore horoscope predictions in various categories such as Growth, Health, Wealth, Career, Love, and Family. These predictions offer users a detailed look into different aspects of their life, based on their Chinese zodiac sign.

This preview helps you understand how the widget will look on your website, ensuring it aligns with your website’s aesthetic.
Make sure the content is engaging and relevant to your target audience, offering personalized and actionable insights.

 

Step 6: Configuring the Widget

Customize the widget's appearance and functionality to align with your page design and user preferences. Follow these steps:

1. Change the Setting Name:

  • Locate the Setting Name field in the settings panel.
  • Enter your desired name to label this configuration.

 

2. Adjust the Color Scheme:

  • Click on the Color Scheme option in the panel.

Select a Pre-set Theme: Choose from various pre-designed color themes, such as:

  • Brut: Light, Light Accent, Accent, Dark, Dark Accent.
  • Metallic: Subtle metallic tones with lighter and darker shades.
  • Evergreen: Calm, green-toned color palettes.
  • Burgundy: Modern themes with rich and vibrant shades.
  • Serenity: Soft pastel shades including purples and whites.
  • Emerald: A deep and rich green palette.

Color Scheme Section: Each pre-designed theme includes options like Light, Light Accent, Accent, Dark, and Dark Accent for fine-tuning colors.

  • Customize Colors: Click the Edit (Pencil Icon) to adjust:
  • Primary Colors: Background, Heading, Paragraphs, and Lines.
  • Secondary Colors: Background, Heading, Paragraphs, and Lines.

Automatic Save: All changes are saved automatically, and you can preview updates in real time in the widget preview section.

 

3. Adjust the Fonts:

  • Click on the Fonts option in the settings panel.

A list of font options will appear, including:

  • Website Default: Uses the default font style of your website.
  • Cormorant Garamond: A classic serif font that provides an elegant and traditional look.
  • Forum: A clean, serif font ideal for headings and formal text.
  • Sen: A modern sans-serif font for a clean and minimalistic design.
  • Montserrat: A popular sans-serif font with a bold and modern appeal.
  • DM Sans: A simple and readable sans-serif font, great for body text etc.

Preview Fonts: Selecting a font will update the widget's text in real-time on the preview section.

Choose a font that matches your website’s style and enhances readability.

Save: Changes are saved automatically without needing manual action.

 

4. Heading and Subheading

Heading:

Enter the title "Chinese Horoscope - Discover Your Chinese Zodiac" to clearly indicate the widget's purpose.

Subheading:

Use the subheading "The Chinese Horoscope widget provides readings based on the Chinese zodiac, offering insights into your personality, destiny, and life path." to give users additional context and explain what they can expect from the widget.

 

5. Configure Default Sign

  • Select a default Chinese zodiac sign from the dropdown menu (e.g., Dog, Dragon, Ox, etc.). This sign will be displayed by default when the widget is first viewed by users.

 

6. Width Settings

  • Adjust the widget's width to fit your page layout.
  • Options include Small, Medium, and Large.
  • Choose the size that complements your page design.

 

7. Adjusting the Paragraph Style

You can customize the paragraph style of the Chinese horoscope text to align with your website's design. Follow these steps:

Locate the "Paragraph Style" Setting:

  • In the settings panel on the left side, find the dropdown labeled Paragraph Style.

Select a Style:

  • Click on the dropdown to view the available styles (e.g., Style 1, Style 2, Style 3).
  • Preview the styles to determine which one best matches your design preference.

Apply Your Selection:

  • Once you’ve chosen a style, select it from the dropdown.
  • The Chinese horoscope text on the widget will update automatically to reflect the new style.

 

8. Chinese Horoscope Layout

  • Define how Chinese horoscope icons are displayed.
  • Layout options:
    • Single Icon: Displays one icon.
    • Grid Icon: Shows all icons in a grid format.
    • Carousel Icon: Allows users to scroll through icons.
  • Select the option that suits your page's design and user experience.

 

Step 7: Additional Customizations for Widget Display

Further refine your widget with these customization options:

1. Chinese Horoscope Icon Layout

  • Choose the style of Chinese horoscope icons (e.g., v1, v2) to match your website's visual theme.

 

2. Category Tab & Category Icon

  • Control where category tabs (e.g., Personal, Health, Profession) appear.
  • Options: Middle, Bottom, or specified locations.
  • Enable or disable the display of category icons in the widget by selecting "Show" or "Hide" to control the visual representation of horoscope categories like Growth, Health, Wealth, and more.

 

3. Category Icon and Icon Version

  • Enable or disable category icons.
  • If enabled, select an icon style (e.g., v1, v2) to match your widget's theme.

 

4. Category Button Shape

  • Adjust the shape of category buttons.
  • Options include Rectangle or Square.
  • Choose a shape that aligns with your design aesthetic.

 

Step 8: Use the Preview Functionality

To ensure your horoscope widget looks perfect across all devices, use the Preview Functionality located in the top-right corner of the customization screen. This feature allows you to switch between different device views:

  • Desktop View: See how the widget appears on a large screen.
  • Tablet View: Preview how it will display on medium-sized devices like tablets.
  • Mobile View: Check the responsiveness and layout on mobile screens.

Toggle between these views to ensure the design, fonts, and content remain consistent across all devices. This step helps you deliver a seamless user experience for all your visitors.

 

Step 9: Save and Embed the Widget

After finalizing the customization:

  1. Click the Save button.
  2. Copy the generated code snippet and embed it on your website.

 

Step 10: Editing Widget Settings

To modify the widget settings for better customization, follow these steps:

Locate the Widget:

  • Navigate to the Widget List on the left sidebar and select the desired widget (e.g., Horoscope).

Access the Settings:

  • On the right side of the screen, click the Edit Setting button.

 

Make Customizations:

  • After clicking Edit Setting, a settings panel will appear.
  • Adjust parameters like layout, width, default zodiac sign, paragraph style, icon layouts, and more as per your preferences.

Save Changes:

  • Once you’ve made the desired changes, ensure you click the Save button to apply your updates.
  • The widget will now appear live on your website as per your settings.

 

Conclusion

The Chinese Horoscope Widget provides personalized insights based on the Chinese zodiac, offering users valuable guidance on their personality, destiny, and life path. With customizable settings for categories, signs, and layout, it enhances user experience and engagement, making it an excellent tool for integrating astrology-based content into your website or app.