# For Magento Website

<figure><img src="https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2F5XK5JbRvw5IrUPROL18I%2Fimage.png?alt=media&#x26;token=3a637309-9b6e-45d5-a31e-589e8a0256e8" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
[Access Rights](https://docs.replyco.com/main-sections/adding-accounts/live-chats/replyco-live-chat/broken-reference) needed: **Main => Instant Messages (View & Edit)**
{% endhint %}

{% hint style="warning" %}
[Access Rights](https://docs.replyco.com/main-sections/adding-accounts/live-chats/replyco-live-chat/broken-reference) needed: **Tools => Widgets (View & Edit)**
{% endhint %}

Adding a Live Chat feature to your Magento website allows you to effortlessly connect with website visitors while offering a streamlined customer service experience. For this, you’ll need to access your Magento account, but to start, head over to your Replyco home screen.

### Step 1: Go to the Widgets tab

To set up Replyco Live Chat, first go to the **Instant Tools** section, then select the **Widgets** tab.

![Go to the Instant Tools section, then select the Widgets tab](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2FgCpoQx3wJrlzzOaS9Rn4%2Fimage.png?alt=media\&token=bcfa7f8f-4ad3-48be-9dbf-2b96bb25d214)

### Step 2: Create a New Widget

From the widgets page, click the **"+ Create New"** button.

![Click the "+ Create New" button](https://gblobscdn.gitbook.com/assets%2F-LnmKPkZJUdvREy_xia7%2F-MO9G3_lPADaw1n0Q7HT%2F-MO9HrrwOSl-BJRInnsI%2FStep%202_create%20new%20widget.png?alt=media\&token=8881bb38-c19c-4eb3-8eda-2524ea2b84bf)

### **Step 3: Set Up Your Live Chat Appearance**&#x20;

Here you will set up the title, appearance and messaging of your Live Chat Widget, as well as assign Live Chat users. Once you’re done, click the **"Save"** button.

![Select an appearance and working time](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2FKPFao4Q5NYXBg0YEtf3a%2Fimage.png?alt=media\&token=fcb4b583-b2fa-4d0f-b785-c64128ba9fb3)

**Theme:** Select a colour for your live chat widget.

**Background Color:** Select the colour that appears behind the chat window.

**Position:** Choose whether the Live Chat widget appears on the left-hand or right-hand side of the screen.

**Working days / Working hours / Holidays:** Selecting your business hours and days of operation, as well as the holidays on which your team isn't available, will determine when web visitors see the "During business hours" or "Outside business hours" message. You may choose to use the working time from your [Company Settings](https://docs.replyco.com/main-sections/administrative-processes/company-settings) page.

![Customize the LiveChat Widget text](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2F0vSH57TKoXIjs6wvfGrr%2Fimage.png?alt=media\&token=0c719dd6-b50e-46eb-8c61-2f46f0c1c376)

<img src="https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2Fhdozc1E86O39euFkn6XA%2Fimage.png?alt=media&#x26;token=3f1aa003-8ec8-431d-bd77-6a7d802fa917" alt="" data-size="original">![](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2F6h0Veq8i6NFGoc3l2aku%2Fimage.png?alt=media\&token=281f465c-ab37-48c2-9678-a0ff7acbf420)

**Chat title:** Give your chat a title — this is what web visitors will see immediately after clicking on the Live Chat widget, but before starting a conversation.

**Introductory message:** Give your chat an introductory message, such as "How can we help you?" This will be displayed at the top of the chat widget after starting a conversation.

**During business hours message:** Write a message that will appear on the Live Chat widget during normal days/hours of operation, as specified above.

**Outside business hours message:** Write a message that will appear on the Live Chat widget when your team is unavailable, as specified above.

![Adjust the additional features](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2FButUTPaeRt6VFS07exGF%2Fimage.png?alt=media\&token=8a1987c3-5bba-43c7-8f8b-54c0b52bb0d3)

**Widget visibility outside working hours**: Leaving this slider in the "On" position will display the widget, while the "Off" position will hide the widget outside of working hours.

**Show welcome message:** Leaving this slider in the "On" position will display the "Introductory message" above the Live Chat widget icon at all times.

**Play sound for new messages:** Leaving this slider in the "On" position will trigger a sound in your browser tab when new messages are sent or received in the Live Chat widget.

**Widget on mobile devices:** Leaving this slider in the "On" position will display the Live Chat widget on devices with a small screen, while the "Off" position will hide the widget on these devices.

**Privacy Policy (GDPR):** Leaving this slider in the "On" position will display an obligate checkbox for website visitors when they are providing their name and email address:\
\&#xNAN;*"I authorize the* [*Replyco*](https://replyco.com/?utm_source=chat-widget) *to process my personal data in accordance with the* [*Privacy Policy*](https://replyco.com/privacy-policy/) *\*".*

**Message page tracking:** Leaving this slider in the "On" position will display the URL of the page a visitor is messaging you from.

{% hint style="info" %}
All fields except the "Holidays" one must be filled in this step before proceeding.
{% endhint %}

### **Step 4: Copy the Live Chat HTML Code**&#x20;

Select your newly created Live Chat widget from the **Widgets** screen. Then, click on the **"Installation"** tab and select **"Copy"** to the right of the HTML code.

![ Select the "Installation" tab and then click on "Copy"](https://gblobscdn.gitbook.com/assets%2F-LnmKPkZJUdvREy_xia7%2F-MO9JfJZ9TCqMOdG7RWJ%2F-MO9JmDAvdXIPDnRVA1C%2FStep%204%20Copy%20Code.png?alt=media\&token=ca7c19f8-4499-4d9a-bf53-f437d5a3af56)

{% hint style="warning" %}
**In order to proceed with the next steps, you will need access to your Shopify store’s administrative tools.**&#x20;
{% endhint %}

### **Step 5: Head Over to Your Magento Store**

#### **Magento** **2**.x manual installation

1. Access your **Magento admin panel** and navigate to **Content → Design → Configuration**.
2. Locate the store view you wish to configure and select **Edit** from the **Action column**.
3. **Retrieve** the widget code from the **Chat Widget** section in your **Replyco account**.
4. **Return to the Magento admin panel**, expand the **HTML Head** section, and insert the widget code into the **Scripts and Style Sheets** field. **Save** the configuration.
5. Proceed to **System → Cache management**, select **all** checkboxes, and click the **Refresh/Submit** button. This will update the cache with the new widget configuration.

#### **Magento** 1.x manual installation

1. Navigate to your **Magento admin panel** and select **System → Configuration → Design → HTML head**.
2. Locate the **Miscellaneous Scripts** field and scroll to it.
3. **Retrieve** the widget code from the **Chat Widget** section in your **Replyco account**.
4. **Return to the Magento admin panel**, and paste the widget code into the **Miscellaneous Scripts** field. Save the configuration by clicking the **Save** **config** button.
5. To update the cache with the new widget configuration, select **all** checkboxes under **System → Cache management** and click the **Refresh/Submit** button.

### All Done!

Your Live Chat widget will now appear on all pages of your Magento website. All of the Live Chat messages you receive will appear in the **Instant Messages tab** of your Replyco home screen.<br>

![](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnmKPkZJUdvREy_xia7%2F-MOnD1zfv1i34LpRV625%2F-MOnDyZ0ed7FplGfNki9%2Fezgif.com-gif-maker%20\(2\).gif?alt=media\&token=f4d0cc83-fe9c-42f9-b3bb-ca0817497952)

### Using Replyco Live Chat

Using your Replyco Live Chat widget couldn't be simpler. Navigate to the **Instant Messages** tab of the Replyco Home screen.&#x20;

From here you can view and respond to all of your Live Chat messages.&#x20;

![](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2FYWxV2zZiTuQQGHE9Bd67%2Fimage.png?alt=media\&token=d4f1e1d5-6f0c-41ab-bf23-2fc1ab07340d)

####

#### Still have questions?

{% hint style="info" %}
**We're here to help!** If you have ANY questions, need help with setup, or just want to chat about customer support (really, we are always up for a good chat), please don't hesitate to reach out via:

**Chat:** [Click on the chat icon](http://replyco.com/#chat) (lower right of the App)

![](https://1512165613-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY1lNT4Lo9mrAPxIvhzr5%2Fuploads%2Fn4n7yVhb0PJZuIxlRYXx%2Fimage.png?alt=media\&token=f412e690-8445-497b-9958-94b5fe33a3eb)

**Email:** <help@replyco.com>

**Phone**: US:flag\_us:  +1 407-588-2574 | UK:flag\_gb: +44 20 8064 0564 &#x20;
{% endhint %}
