Stella WordPress Integration Guide

September 21, 2023

Introduction:

Stella's AI-powered sales bot is designed to effortlessly fit within the WordPress environment, ensuring that site visitors receive instant, intelligent responses, driving higher engagement and conversion rates.

This guide walks you through the process of embedding Stella into your WordPress website.

Prerequisites:

First, ensure you have:

  1. Admin Access: You should have administrative rights to your WordPress dashboard.

  2. Stella Embed Code: Ensure you've grabbed your unique Stella embed code from your Stella Studio.

Stella Integration Methods:

Stella offers a range of integration methods to suit your WordPress site's specific needs:

1. Chat with Stella Button:

Allow users to initiate conversations with Stella by simply clicking a button on your website, enhancing real-time engagement.

a. Navigate to Theme Editor: From your WordPress dashboard, head to Appearance > Theme Editor.

b. Access footer.php: Locate the footer.php file in the theme files listed on the right-hand side.

c. Embed Stella Code: Paste the Stella embed code just before the closing </body> tag:

<script src="YOUR_STELLA_EMBED_CODE_HERE" defer></script>

d. Save Changes: Once embedded, click Update File. This ensures Stella's chat button is now active on your site.

2. Direct Embed:

Opt for a more direct approach where Stella appears seamlessly embedded, ready to engage without users needing to click a button.

a. Edit Desired Page/Post: Choose where you'd like Stella to be directly embedded and open that page or post for editing.

b. Use Custom HTML Block: In the WordPress Gutenberg editor, opt for the Custom HTML block.

c. Input iFrame Element: Here, paste the following, replacing "YOUR_STELLA_IFRAME_URL_HERE" with your unique Stella iFrame URL:

<iframe src="YOUR_STELLA_IFRAME_URL_HERE" width="XXX" height="XXX" frameborder="0"></iframe>

d. Personalize Appearance: Adjust the width and height attributes as desired to fit Stella perfectly within your site's design.

e. Confirm Integration: Publish or update the page or post to make Stella's direct embed live.

3. Custom Triggers:

Craft a tailored experience by activating Stella based on user actions or specific site elements, leading to contextually relevant interactions.

a. Integrate Stella Embed Code: As in the "Chat with Stella Button" method, embed the Stella code into your footer.php.

b. Designate Triggers: Edit the page or post where you wish to introduce custom triggers.

c. Attach data-stella-button Attribute: In the editor, select your desired HTML element meant to trigger Stella. Append the data-stella-button attribute to this element.

d. Activate: Publish or update the content, ensuring that Stella now responds to your custom triggers.

Conclusion:

Follow the steps outlined in this guide for a frictionless integration experience. We're excited for you to get started selling with Stella. For any queries or support, feel free to contact our team.

Logo

Experience Stella Now or Ask Stella to Subscribe to Sign Up And Receive Insights

Stella WordPress Integration Guide

September 21, 2023

Logo

Experience Stella Now or Ask Stella to Subscribe to Sign Up And Receive Insights

Introduction:

Stella's AI-powered sales bot is designed to effortlessly fit within the WordPress environment, ensuring that site visitors receive instant, intelligent responses, driving higher engagement and conversion rates.

This guide walks you through the process of embedding Stella into your WordPress website.

Prerequisites:

First, ensure you have:

  1. Admin Access: You should have administrative rights to your WordPress dashboard.

  2. Stella Embed Code: Ensure you've grabbed your unique Stella embed code from your Stella Studio.

Stella Integration Methods:

Stella offers a range of integration methods to suit your WordPress site's specific needs:

1. Chat with Stella Button:

Allow users to initiate conversations with Stella by simply clicking a button on your website, enhancing real-time engagement.

a. Navigate to Theme Editor: From your WordPress dashboard, head to Appearance > Theme Editor.

b. Access footer.php: Locate the footer.php file in the theme files listed on the right-hand side.

c. Embed Stella Code: Paste the Stella embed code just before the closing </body> tag:

<script src="YOUR_STELLA_EMBED_CODE_HERE" defer></script>

d. Save Changes: Once embedded, click Update File. This ensures Stella's chat button is now active on your site.

2. Direct Embed:

Opt for a more direct approach where Stella appears seamlessly embedded, ready to engage without users needing to click a button.

a. Edit Desired Page/Post: Choose where you'd like Stella to be directly embedded and open that page or post for editing.

b. Use Custom HTML Block: In the WordPress Gutenberg editor, opt for the Custom HTML block.

c. Input iFrame Element: Here, paste the following, replacing "YOUR_STELLA_IFRAME_URL_HERE" with your unique Stella iFrame URL:

<iframe src="YOUR_STELLA_IFRAME_URL_HERE" width="XXX" height="XXX" frameborder="0"></iframe>

d. Personalize Appearance: Adjust the width and height attributes as desired to fit Stella perfectly within your site's design.

e. Confirm Integration: Publish or update the page or post to make Stella's direct embed live.

3. Custom Triggers:

Craft a tailored experience by activating Stella based on user actions or specific site elements, leading to contextually relevant interactions.

a. Integrate Stella Embed Code: As in the "Chat with Stella Button" method, embed the Stella code into your footer.php.

b. Designate Triggers: Edit the page or post where you wish to introduce custom triggers.

c. Attach data-stella-button Attribute: In the editor, select your desired HTML element meant to trigger Stella. Append the data-stella-button attribute to this element.

d. Activate: Publish or update the content, ensuring that Stella now responds to your custom triggers.

Conclusion:

Follow the steps outlined in this guide for a frictionless integration experience. We're excited for you to get started selling with Stella. For any queries or support, feel free to contact our team.

Stella WordPress Integration Guide

September 21, 2023

Logo

Experience Stella Now or Ask Stella to Subscribe to Sign Up And Receive Insights

Introduction:

Stella's AI-powered sales bot is designed to effortlessly fit within the WordPress environment, ensuring that site visitors receive instant, intelligent responses, driving higher engagement and conversion rates.

This guide walks you through the process of embedding Stella into your WordPress website.

Prerequisites:

First, ensure you have:

  1. Admin Access: You should have administrative rights to your WordPress dashboard.

  2. Stella Embed Code: Ensure you've grabbed your unique Stella embed code from your Stella Studio.

Stella Integration Methods:

Stella offers a range of integration methods to suit your WordPress site's specific needs:

1. Chat with Stella Button:

Allow users to initiate conversations with Stella by simply clicking a button on your website, enhancing real-time engagement.

a. Navigate to Theme Editor: From your WordPress dashboard, head to Appearance > Theme Editor.

b. Access footer.php: Locate the footer.php file in the theme files listed on the right-hand side.

c. Embed Stella Code: Paste the Stella embed code just before the closing </body> tag:

<script src="YOUR_STELLA_EMBED_CODE_HERE" defer></script>

d. Save Changes: Once embedded, click Update File. This ensures Stella's chat button is now active on your site.

2. Direct Embed:

Opt for a more direct approach where Stella appears seamlessly embedded, ready to engage without users needing to click a button.

a. Edit Desired Page/Post: Choose where you'd like Stella to be directly embedded and open that page or post for editing.

b. Use Custom HTML Block: In the WordPress Gutenberg editor, opt for the Custom HTML block.

c. Input iFrame Element: Here, paste the following, replacing "YOUR_STELLA_IFRAME_URL_HERE" with your unique Stella iFrame URL:

<iframe src="YOUR_STELLA_IFRAME_URL_HERE" width="XXX" height="XXX" frameborder="0"></iframe>

d. Personalize Appearance: Adjust the width and height attributes as desired to fit Stella perfectly within your site's design.

e. Confirm Integration: Publish or update the page or post to make Stella's direct embed live.

3. Custom Triggers:

Craft a tailored experience by activating Stella based on user actions or specific site elements, leading to contextually relevant interactions.

a. Integrate Stella Embed Code: As in the "Chat with Stella Button" method, embed the Stella code into your footer.php.

b. Designate Triggers: Edit the page or post where you wish to introduce custom triggers.

c. Attach data-stella-button Attribute: In the editor, select your desired HTML element meant to trigger Stella. Append the data-stella-button attribute to this element.

d. Activate: Publish or update the content, ensuring that Stella now responds to your custom triggers.

Conclusion:

Follow the steps outlined in this guide for a frictionless integration experience. We're excited for you to get started selling with Stella. For any queries or support, feel free to contact our team.